css3动画：animation

例：

-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate;

@keyframes myfirst{　　from{background:red;}　　to{background:yellow;}}@-webkit-keyframes myfirst{　　frome{background:red;}　　to{background:yellow;}} //或者@keyframes myfirst{　　0%{   }　　25%{   }　　50%{    }　　100%{    }}

参数及含义：

animation-name: 动画的名字

animation-duration: 动画完成一个周期所花费的秒数，默认是0

animation-timing-function: 规定动画的速度曲线，默认是ease(动画以低速开始，然后加块，在结束前变慢)；

　　　　　　　　　　　　　　linear(动画从头到尾的速度是相同的)

　　　　　　　　　　　　　　ease-in(动画以低速开始)

　　　　　　　　　　　　　　ease-out(动画以低速结束)

　　　　　　　　　　　　　　ease-in-out(动画以低速开始和结束)

animation-delay: 规定动画何时开始，默认是0；

animation-iteration-count: 规定动画被播放的次数，默认是1， infinite(无限循环)

animation-direction: 规定动画是否在下一周期逆向地播放，默认是normal（不逆向播放）

　　　　　　　　　　　　reverse(动画反向播放)

　　　　　　　　　　　　alternate(动画在奇数1,3,5、、、正向播放，在偶数2,4,5、、、反向播放)　

　　　　　　　　　　　　alternate-reverse(动画在奇数次1,3,4、、、反向播放，在偶数次2,4,6、、、正向播放)　

转载于:https://www.cnblogs.com/baixuemin/p/6490222.html

css3动画：animation相关推荐

css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
幻灯片（基于CSS3动画animation）
效果预览: 实现思路: 类似于:h5+css3+js之移动端轮播图将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation定义每一帧的动画,在每一帧 ...
Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题.CSS3 的出现,让动画变得更加容易,性能也更加好. ...
css3动画animation，transition
animation demo1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
css3动画 --- Animation
Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置. 动画包括两个部分:描述动画的样式规则:用于指定动画开始.结束以及中间点样式的关键帧. 相较 ...
CSS3动画animation
一.语法 animation: animation-name(创建的动画名) animation-duration(动画时间) animation-timing-function(动画方式) anim ...
CSS3动画(animation) 捕鱼达人之无限摆动游泳的鱼案例
本案例下载地址>>>点击打开链接效果: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

css3动画：animation

css3动画：animation相关推荐

最新文章

热门文章