24CSS3中的动画

技术交流QQ群:1027579432，欢迎你的加入！

动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比于过渡而言，动画可以实现更多的变化，更多的控制，连续自动播放等效果。

1.动画的基本使用

制作动画分为两个步骤：
- a.先定义动画；
- b.再使用(调用)动画；

1.1 先用keyframes定义动画(类似于定义类选择器)

定义动画语法：

@keyframes 动画名称 {0% {width: 100px;}100% {width: 200px;}
}

动画序列：
- 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。
- 在@keyframes中规定某些CSS样式，这样就能创建由当前样式逐渐改为新样式的动画效果；
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式，任意多的次数。
- 请用百分比来规定变化发生的时间，或者使用关键字from和to，等价于0%和100%。

1.2 元素使用动画

使用动画语法：

<!--调用动画-->
animation-name: 动画名称;
<!--持续时间-->
animation-duration: 持续时间;

2.动画序列实现多个状态变化

代码：

/* 1.动画序列可以做多个状态的变化  keyframe 关键帧 */
/* 2.里面的百分比一定要是整数*/
/* 3.里面的百分比就是 总的时间（本案例中是10s）的划分 25% * 10s = 2.5s*/
@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}
}div {width: 200px;height: 200px;background-color: pink;animation-name: move;animation-duration: 10s;
}

3.动画中常用的属性

4.动画中常用属性的简写方式[重点]

简写方向的语法：

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
<!--例如-->
animation: myfirst 5s linear 2s infinite alternate;

注意：
- 动画属性的简写方式中，不包含animation-play-state；
- 暂停动画：animation-play-state: paused;经常和鼠标经过等其他配合使用；
- 想要动画走回来，而不是直接跳回来，可以使用animation-direction: alternate;
- 盒子动画结束后，停止的结束位置用animation-fill-mode: forwards;

5.运动曲线animation-timing-function中的细节

animation-timing-function: 规定了动画的运动曲线，默认是eas。

6.资料下载

笔记及代码，欢迎star,follow,fork…

24CSS3中的动画相关推荐

ue4中面部动画制作视频教程 Facial Animation More In Unreal Engine 4
ue4中面部动画制作视频教程 Facial Animation & More In Unreal Engine 4 时长4h 包含项目文件 1920X1080 MP4 大小解压后:5.75G ...
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...
python 动画场景_Python GUI教程（十五）：在PyQt5中使用动画
QT作为一个全面的桌面应用程序开发包,其自然提供了对图像的动画支持.本篇文章中,就来简单地在PYQt5中使用Animation动画功能. 本篇将会依次完成以下功能: 在GUI界面中显示一个图片(用一个 ...
WPF中的动画——（二）From/To/By 动画
原文:WPF中的动画--(二)From/To/By 动画我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimati ...
jQuery中的动画
一.基本动画 1.show()方法和hide()方法:改变display属性为一个元素调用hide()方法,会将该元素的display样式改为"display:none". $( ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
WPF中的动画——（二）From/To/By 动画(二)
WPF中的动画--(二)From/To/By 动画我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation ...
利用Maya进行论文中网格动画数据的渲染
利用Maya进行论文中网格动画数据的渲染 Maya学习资料如何利用三维动画制作软件Maya,快速生成高质量的模型渲染效果,从而为论文和Demo增色,比如以下效果: 学习资料下载(91.0M) Sen ...

24CSS3中的动画

技术交流QQ群:1027579432，欢迎你的加入！

1.动画的基本使用

1.1 先用keyframes定义动画(类似于定义类选择器)

1.2 元素使用动画

2.动画序列实现多个状态变化

3.动画中常用的属性

4.动画中常用属性的简写方式[重点]

5.运动曲线animation-timing-function中的细节

6.资料下载

24CSS3中的动画相关推荐

最新文章

热门文章