CSS3动画

CSS3动画

文章目录

​​动画概述​​​​动画的基本规则​​​​动画的基本使用​​​​利用动画序列完成多个状态的实现​​​​CSS3动画常见属性​​​​动画简写属性​​​​有关速度曲线​​

动画概述

​​动画（animation）​​是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡(过渡可以说是一种简单的动画)，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本规则

制作动画分为两步：

先定义动画在使用(调用)动画

首先定义动画，我们使用keyframes(类似定义类选择器)

keyframes译为关键帧，所以也叫关键帧动画

语法结构：

@keyframes { 0%{ width:100px; } 100%{ width:200px; }}

这里的0%和100%有专门的名字 – ​​动画序列​​

动画序列

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

接下来是元素使用动画，在使用的时候有两个属性是必不可少的：

语法结构：

div { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; /* 记得带单位 */ }

动画的基本使用

现在我们来做一个小案例：一打开网页，一个红色的盒子就从左边飞到右边。

代码实现如下：

利用动画序列完成多个状态的实现

我们现在有一个新需求，还是刚才那个盒子，但是我们想让他围着浏览器窗口走一圈，这我们怎么去实现呢？

原理图：

代码实现：

CSS3动画常见属性

动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

有关速度曲线

animation-timing-function：规定动画的速度曲线，默认是“ease”

其中这个steps()不同于上面五种，它不是一种连续平滑的效果，而是一种状态的切换(类似于断点)

效果代码：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。