animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法:
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state: paused|running;
下面详细介绍下各动画属性的用法:
1、animation-name:规定需要绑定到选择器的 keyframe 名称
语法:animation-name: keyframename|none;
keyframename | 规定需要绑定到选择器的 keyframe 的名称。 |
none | 规定无动画效果(可用于覆盖来自级联的动画)。 |
2、animation-duration:定义动画完成一个周期所需要的时间,以秒或毫秒计。
语法:animation-duration: time;
time | 规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。 |
3、animation-timing-function:规定动画的速度曲线。
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
语法:animation-timing-function: value;
linear | 动画从头到尾的速度是相同的。 | |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 | |
ease-in | 动画以低速开始。 | |
ease-out | 动画以低速结束。 | |
ease-in-out | 动画以低速开始和结束。 | |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
4、animation-delay:规定动画开始之前的延迟。
语法:animation-delay: time;
time | 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。 |
5、animation-iteration-count:定义动画的播放次数。
语法:animation-iteration-count: n|infinite;
n | 定义动画播放次数的数值。 |
infinite | 规定动画应该无限次播放。 |
6、animation-direction:定义是否应该轮流反向播放动画。
语法:animation-direction: normal 或 alternate
normal | 默认值。动画应该正常播放。 |
alternate | 动画应该轮流反向播放。 |
简写例子:
div{
width: 200px;
height: 200px;
margin:0 auto;
background:red;
animation:case 5s linear 1s infinite alternate;
}
@keyframes case
{
from{ background:red }
to{ background:blue }
}
7、animation-play-state 属性规定动画正在运行还是暂停。
语法:animation-play-state: paused|running;
paused | 规定动画已暂停。 |
running | 规定动画正在播放。 |
相关推荐
css3弹力球动画animation属性制作3D弹力球弹跳动画效果
纯css3 animation动画属性点击loading加载动画 纯css3 animation动画属性点击loading加载动画
这是利用css3的animation属性和html5制作的一款十分逼真的大风车旋转动画。整个代码十分简洁,效果很给力。
jquery css3 animation属性多个页面切换动画 jquery css3 animation属性多个页面切换动画
css3 Animation属性参数介绍例如@keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 ...
CSS3 动画属性(Animation) CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 CSS 尺寸属性(Dimension) 内容生成(Generated Content) 可伸缩框属性(Flexible Box) Grid ...
css中的animation属性轮播图动画效果
若某个选择器应用动画,则在该选择器上通过animation属性绑定动画。 规定至少以下两项CSS动画属性,可以实现动画效果: 动画名称 animation-name 动画时长 animation-duration 可以使用简写属性animation同时设置...
纯css3 animation属性制作旋转文字动画切换效果
纯css3 animation动画属性点击loading加载动画提示框效果代码
纯css3 animation属性圆形动态时钟特效 纯css3 animation属性圆形动态时钟特效 纯css3 animation属性圆形动态时钟特效
这是一款效果非常炫酷的纯CSS3西洋镜动画特效。该西洋镜动画使用CSS3的帧动画和3D transforms来制作,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画效果。
css3基于animation属性实现的人物动画特效源码
css3+animation属性制作拆分loading文字加载动画特效.zip
简介:css3 animation属性绘制情人节煎蛋爱心恋爱表情动画特效。 情人节精灵示爱动画特效css3(源码下载) 简介:css3 animation属性绘制情人节煎蛋爱心恋爱表情动画特效。 情人节精灵示爱动画特效css3(源码下载) ...
CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图效果,需要的朋友参考下吧
所有动画属性的简写属性,除了 animation-play- state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing- function...
CSS3 Sprite僵尸行走动画特效是一款使用animation动画的steps属性制作的僵尸行走CSS3 Sprite动画特效。
CSS3动画--animation属性(name和duration)-附件资源