登录

css3 复杂动画,多次动画,单次运动,动画只运动一次执行一次(animation)

我来纠错
//无限循环运行
.box{ 
-webkit-animation:name 0.6s linear 0s normal none infinite;
animation:name 0.6s linear 0s normal none infinite;
 }
//单次运行
.box{ 
-webkit-animation:name 0.6s linear 0s normal 1 forwards;
animation:name 0.6s linear 0s normal 1 forwards;
 }

@-webkit-keyframes name{0%{ opacity:0; }100% { opacity:1; }}
@keyframes name{0%{ opacity:0; }100% { opacity:1; }}

//animation: name duration timing-function delay iteration-count direction;
值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

//animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
值	描述	
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始,然后加快,在结束前变慢。
ease-in	动画以低速开始。	
ease-out	动画以低速结束。	
ease-in-out	动画以低速开始和结束。	
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
发送
热门关键词:
命令
知识类型:
标题描述:
详细解答:

提交审核您编辑的知识会经过 前端大牛 人工审核。