Css3中的动画属性是什么

这篇文章主要为大家展示了“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://myzitong.com/article/jjicej.html