CSS3设置动画的属性是什么(CSS3,web开发)

时间:2024-05-04 08:12:29 作者 : 石家庄SEO 分类 : web开发
  • TAG :

动画相关属性有:transform、transform-origin、transition、“@keyframes”、animation、animation-name、animation-duration、animation-delay等。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3有三种动画分为:transform、transition、animation

1、transform(2D/3D 转换属性)

属性说明CSStransform适用于2D或3D转换的元素3transform-origin允许您更改转化元素位置3transform-style3D空间中的指定如何嵌套元素3perspective指定3D元素是如何查看透视图3perspective-origin指定3D元素底部位置3backface-visibility定义一个元素是否应该是可见的,不对着屏幕时3

2、transition(过渡属性)

属性说明CSStransition此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。3transition-property设置用来进行过渡的 CSS 属性。3transition-duration设置过渡进行的时间长度。3transition-timing-function设置过渡进行的时序函数。3transition-delay指定过渡开始的时间。3

3、animation(动画属性)

属性描述CSS@keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。3animation复合属性。检索或设置对象所应用的动画特效。3animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义3animation-duration检索或设置对象动画的持续时间3animation-timing-function检索或设置对象动画的过渡类型3animation-delay检索或设置对象动画的延迟时间3animation-iteration-count检索或设置对象动画的循环次数3animation-direction检索或设置对象动画在循环中是否反向运动3animation-play-state检索或设置对象动画的状态3

示例:

<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <style> div{ width:50px; height:50px; background:red; margin:100px; animation:mymove5sinfinite; -webkit-animation:mymove5sinfinite;/*SafariandChrome*/ } @keyframesmymove{ 50%{ width:150px; height:150px; transform:rotate(360deg); } } @-webkit-keyframesmymove{/*SafariandChrome*/ 50%{ width:100px; height:100px; transform:rotate(360deg); } } </style> </head> <body> <div></div> </body></html>

CSS3设置动画的属性是什么

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:CSS3设置动画的属性是什么的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:JavaScript中api指的是什么下一篇:

10 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18