CSS3动画 animation

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

格式：

animation: 动画名字动画时间运动曲线何时开始循环次数反向运动
animation: onemove 5s ease-in-out 2s 3 alternate;

1、基本使用

1.1、语法from to

@keyframes mymove{from{}to{}}

百分比 实例div {width: 100px;height: 100px;background: red;animation: mymove 5s;position:absolute;left: 0px;top:0px;}/*@keyframes是关键字不能更改  name是自定义的变量*/@keyframes mymove{from{left: 0px;}to{left:100px ;}}

1.2、百分比

实例

 div {margin: 200px auto;width: 100px;height: 100px;background-color: red;animation: myani1 10s linear;}@keyframes myani1 {0%{transform: translate(0, 0);}25%{transform: translate(100px, 0);}      50%{transform: translate(100px, 100px);}75%{transform: translate(0, 100px);}100%{transform: translate(0, 0);}}

2、动画运动animation-timing-function

linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

3、动画延时animation-delay

animation-delay 属性定义动画什么时候开始。
/*延迟2s,只有第一次会延迟*/
animation-delay:2s;

4、循环次数animation-iteration-count n大于0，且为整数
/*循环3次 */
animation-iteration-count：3;
/*无限循环 */
animation-iteration-count：infinite;

5、反向运动animation-direction

normal

每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性，每次都是开始执行

reverse

反向运行动画，每周期结束动画由尾到头运行。动画每次都是从尾部开始运行

alternate

动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代，也就是第一次是正向的，第二次是反向的

alternate-reverse

反向交替，反向开始交替

动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。第一次是反向，后面是第二次是正向。

6、animation-play-state暂停或停止

animation-play-state css属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

/*运行*/
animation-play-state: running;
/*暂停*/
animation-play-state: paused;


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06-动画animation</title><style>.fa {width: 500px;height: 500px;border: 1px solid;perspective: 200px;margin: 0 auto;}.sn {/* transition: all 2s ease-out 1s; */width: 150px;height: 150px;background-color: green;/* animation: onemove 5s ease-in-out 2s 3 alternate; */animation: twomove 5s ease-in-out 2s 3 alternate;}@keyframes onemove {from {width: 150px;height: 150px;}to {width: 400px;height: 400px;}}@keyframes twomove {0% {/* transform复合值 通过空格隔开 */transform: translate3d(100px, 100px, 0px) scale(.5);}50% {transform: translate3d(200px, 200px, 0px) scale(2);}100% {transform: translate3d(1, 1, 1 ,45deg) skewX(45deg);}}</style>
</head>
<body><div class="fa"><div class="sn"></div></div>
</body>
</html>

CSS3动画 animation相关推荐

css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
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

1、基本使用

1.1、语法from to

1.2、百分比

2、动画运动animation-timing-function

linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

3、动画延时animation-delay

4、循环次数animation-iteration-count n大于0，且为整数

5、反向运动animation-direction

`normal`

`reverse`

`alternate`

`alternate-reverse`

6、animation-play-state暂停或停止

CSS3动画 animation相关推荐

最新文章

热门文章