动画-Animation/@keyframes

动画的使用流程有两步，分为定义动画和使用动画，定义动画相当于制作动画，有两种制作方法，一个是 from{}···to{}；另一个是百分比。制作完动画之后，再在需要的地方通过 animation 来使用制作好的动画效果。

1、定义动画——from{}···to{}

@keyframes 自定义动画名称{
from {//改变前的样式
}
to {//改变后的样式
}

2、定义动画——百分比

百分比指的是动画全过程的时间占比，动画过程从头到尾是100%。

@keyframes 自定义动画名称{0% {//初始样式}50% {//动画一半进度时的样式}100% {//动画结束时的样式}
}

3、使用动画

animation动画的属性（可属性连写，复合写法），不分先后顺序，当写了两个时间值的时候，前面的是动画时间，后面的是延迟时间

自定义的动画名称——animation-name （连写必填）

动画时间——animation-duration（取值数字，单位：s）（连写必填）

速度曲线——animation-timing-function：

取值 linear，可以理解为匀速线性；

取值为step（数字），即将完整的动画时长等分为几块（帧），比如一个6秒的动画，设置step（3），便将原动画分为2秒的三个动画，并按顺序播放，简单理解为，设置几，动画就卡几下，一般适用于精灵图动画

取值为ease，意为平滑播放

取值为ease-in，先慢再快

取值为ease-out，先快再慢

ease-in-out，慢-快-慢

重复次数——animation-iteration-count（取值为数字，无单位；取值为 infinite，表示无线循环）

延迟时间——animation-delay，（取值为数字，单位：s），表示动画延迟指定时间后再执行

动画方向——animation-direction：

取值normal，默认，正向

取值reverse，反向运行

取值alternate，正反交替，可以理解为视频放完后，再倒放回去，重复

取值alternate-reverse，反正交替

动画结束后的状态——animation-fill-mode：

取值forwards，动画结束的状态

取值backwards，默认值，开始时的状态

暂停动画——animation-play-state：取值为paused

复合写法以及分开写法示例：

/*复合写法，例举*/
animation: name 1s infinite alternate; /*拆分写法，例举部分*/
animation-name: change;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-play-state: paused;

示例：

动画实现示例动画：

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid rgb(0, 82, 169);margin: 100px auto;overflow: hidden;}.box ul {width: 2000px;animation: move 7s infinite linear;}.box li {float: left;}@keyframes move {to {transform: translateX(-1400px);}}</style>
</head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 当显示567移动的时候,后面的区域会显示空白样式，所有需要在第7张后面再插入需要补上的图片，实现连续滚动的效果 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div>
</body></html>

动画-Animation/@keyframes相关推荐

css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
动画-animation
动画 ===================================================================================== 1.@keyframe ...
css3动画animation，transition
animation demo1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备对于这个实现,我们需要一个简 ...
css3动画与@keyframes关键帧
Css3动画与@keyframes关键帧开发工具与关键技术:DW 作者:黄金燕年级: 1805 撰写时间: 2019年2月21日在一个"@keyframes"中的样式规则可以 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
幻灯片（基于CSS3动画animation）
效果预览: 实现思路: 类似于:h5+css3+js之移动端轮播图将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation定义每一帧的动画,在每一帧 ...
css动画定义,css3的动画(animation)属性的详解（附代码）
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...

动画-Animation/@keyframes

1、定义动画——from{}···to{}

2、定义动画——百分比

3、使用动画

示例：

动画-Animation/@keyframes相关推荐

最新文章

热门文章