建站
咨询
售后
建站咨询
这篇文章主要为大家展示了“Css3中的动画属性是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css3中的动画属性是什么”这篇文章吧。
10年积累的网站制作、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有微山免费网站建设让你可以放心的选择与我们合作。
animation-name：动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义，如果提供多个属性值用逗号隔开。
@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name就可以执行动画。定义动画时可直接使用关键字from和to，从一种状态过度到另一种状态。
CSS
.animation_name{
left:0;
top:100px;
position: absolute;
-webkit-animation: 0.5s 0.5s ease infinite alternate;
-moz-animation: 0.5s 0.5s ease infinite alternate;
-webkit-animation-name:demo;
-moz-animation-name:demo;
}
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
@-webkit-keyframes demo1{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}
.animation_name{
left:0;
top:100px;
position: absolute;
-webkit-animation: 0.5s 0.5s ease infinite alternate;
-moz-animation: 0.5s 0.5s ease infinite alternate;
-webkit-animation-name:demo;
-moz-animation-name:demo;
}
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
@-webkit-keyframes demo1{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}
animation-duration：动画时间
animation-timing-function：播放方式，取值如下：
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果
ease-in：渐显效果
ease-out：渐隐效果
ease-in-out：渐显渐隐效果
step-start：马上跳转到动画结束状态
step-end：保持动画开始状态，到动画执行时间结束，马上跳转到动画结束状态
step([,[start | end]]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性显示，第二个参数默认为end，设置最后一步状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，以animation-fill-mode的设置为动画结束状态。
cubic-bezier(,,,)：特殊的立方赛贝尔曲线效果
animation-delay：开始播放时间
animation-iteration-count：播放次数，取值为infinite时表示无限循环播放
animation-direction：播放方向，取值为：
normal：正常方向
reverse：动画反向运行，方向始终与normal相仿
alternate：动画会循环正反交替运动
animation-fill-mode：播放后的状态，取值：
none：默认值，不设置
forwards：结束后保持动画结束的状态
backwards：结束后返回动画开始时状态
both：结束后可遵循forwards和backwards两个规则
animation-play-state：检索或设置对象动画的状态，取值：
running：默认，运动
paused：暂停
四、关联属性
transform-origin：变形原点，transform的参照点，默认为元素的中心点。有两个参数，参数一为横坐标，参数二为纵坐标。
percentage：用百分比指定坐标值，可负
length：用长度指定坐标值，可负
left center right：水平方向取值
top center bottom：垂直方向取值
perspective-prigin：透视原点，定义在X轴和Y轴的3D元素，允许改变3D元素的底部位置，定义该属性时，它是一个元素的子元素，透视图，而不是元素本身。
注意：使用该属性必须和perspective属性一起用，只影响3D转换的元素。
取值：percentage、length、left、center、right、top、center、bottom
backface-visibility：隐藏内容的背面，默认情况下背面可见，反转后变换的内容仍然可见，当backface-visibility设置hidden时，旋转后内容将隐藏，旋转后正面将不再可见。
取值：visible、hidden
transform-style：3D呈现，设置内嵌的元素在3D空间如何呈现，有两个值：
flat：所有子元素在2D平面呈现
preserve-3d：保留3D空间
以上是“Css3中的动画属性是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页标题：Css3中的动画属性是什么
网站网址：http://lswzjz.com/article/jjicej.html
