CSS3动画属性 animation 文章包含个人理解错误请指出

往期文章

【css高级】变量详解

轮播图swiper框架的基本使用
【Transform3D】转换详解（看完就会）
【css动画】移动的小车

【CSS3】 float浮动与position定位常见问题（个人笔记）

如何完成响应式布局，有几种方法？看这个就够了

详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）

[前端CSS高频面试题]如何画0.5px的边框线（详解）
CSS3基础属性大全
CSS3动画属性 animation详解（看完就会）
CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会）
CSS3 Z—Index 详解
CSS3 positon定位详解（通俗易懂）

keyframes

动画相关的值

animation-name animation-duration

animation-timing-function animation-delay

animation-iteration-count animation-play-state

animation-direction animation-fill-mode

animation

keyframes

用 keyframes定义动画，写上动画要执行的内容，（类似类选择器）

  @keyframes a {0% {width: 300px;}100% {width: 600px;}}

这就是定义了一个动画变量名，从0%到100%也就是从开始到结束，也可以用from，to来表示，

  @keyframes a {from {width: 300px;}to {width: 600px;}}

里面写属性变化的值，不止可以分两个段也可以进行多段分割

  @keyframes a {0% {width: 300px;}50% {width: 800px;}100% {width: 300px;}}

，用百分数进行分割。

动画相关的值

@keyframes 规定动画
animation-name 规定 @keyframes 动画的名称（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）
animation-timingfunction 规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是 0
animation-iteration-count 规定动画被播放的次数，默认是 1，还有 infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"

animation 所有动画属性的简写属性，除了animation-play-state 属性

animation-name animation-duration

 <style>@keyframes a {0% {width: 300px;}50% {width: 800px;}100% {width: 300px;}}div {animation-name: a;animation-duration: 2s;}</style><script></script>
</head><body><div style='background-Color:red;width: 300px;height:300px ;'></div>
</body>

刷新之后就自动触发动画，执行的动画变量名是a，两秒内完成动画，也就是从0%到100%两秒内完成。

animation-timing-function animation-delay

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

@keyframes a {0% {width: 300px;}50% {width: 800px;}100% {width: 300px;}}div {animation-name: a;animation-duration: 5s;animation-timing-function: ease-in-out;animation-delay: 2s;}

animation-timing-function 动画开始和结束慢速

animation-delay 动画延迟两秒开始。

animation-iteration-count animation-play-state

  @keyframes a {0% {width: 300px;}50% {width: 800px;}100% {width: 300px;}}div {animation-name: a;animation-duration: 5s;animation-timing-function: ease-in-out;animation-delay: 2s;animation-iteration-count: infinite;}div:hover {animation-play-state: paused;}

animation-iteration-count 循环次数，infinite重复循环

animation-play-state paused 停止动画当鼠标移入动画停止

animation-direction animation-fill-mode

animation-direction

normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

  @keyframes a {0% {width: 300px;}50% {width: 500px;}100% {width: 800px;}}div {animation-name: a;animation-duration: 5s;animation-timing-function: ease-in-out;animation-delay: 2s;animation-iteration-count: infinite;/* animation-fill-mode: forwards; */animation-direction: alternate;}div:hover {animation-play-state: paused;}

animation-iteration-count：infinite 重复循环 animation-direction：alternate 在偶数次反向播放

就形成了长度一直来回变化的效果

animation-fill-mode

保持最终状态 forwards 原位置 backwards

  @keyframes a {0% {width: 300px;}50% {width: 500px;}100% {width: 800px;}}div {animation-name: a;animation-duration: 5s;animation-timing-function: ease-in-out;animation-delay: 2s;animation-fill-mode: forwards;}div:hover {animation-play-state: paused;}

animation-fill-mode: forwards 宽度到达800后停止动画保持在动画执行完毕的状态不会恢复

animation

直接写出所有的相关动画属性（简写），除了animation-play-state 属性。

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

 @keyframes a {0% {width: 300px;}50% {width: 500px;}100% {width: 800px;}}div {animation: a 5s ease-in-out 2s infinite alternate;}div:hover {animation-play-state: paused;}

CSS3动画属性 animation详解（看完就会）相关推荐

css3动画属性animation
一,animation属性 1.在css3中定义了新属性animation用于制作动画效果 2.一个完整的动画效果由animation属性和@keyframes动画帧组成. 二,animation子属 ...
查看计算机配置讲解,教您如何看显示器参数！电脑显示器常见参数详解,看完秒懂！...
由于显示器可选的范围比较广,同一个尺寸大小的显示器,不同品牌不同型号不同参数会有上百种可供选择,其实我们只需明确了预算与用途,才可以正确选择合适自己的显示器.那么如何看显示器参数?下面装机之家分享一下 ...
计算机网络参数怎么看,电脑显示器参数详解看完秒懂！显示器参数怎么看？...
显示器参数怎么看?无论是显示器的宣传.购买页面,还是专业媒体的显示器评测中,我们都会看到一些用来描述显示器性能的参数.小编觉着,显示器就像是电脑的一张面孔,显示着它的各种表情,也负责与用户的沟通,而显 ...
CSS3过渡属性transition详解
拖了两天的更新诶,懈怠了懈怠了 transition蛮好玩的,可以实现由一个状态像另一个状态的动画过渡,无缝斜街的感觉,不多说啦,开始介绍属性吧~ 1.transition可以传4 / (4n)个参数 ...
Java-方法的详解( 看完之后，我不允许还有人不懂！)
文章目录一.什么是方法二.方法定义三.方法调用四.方法重载 1.什么是方法重载? 2.为什么会出现方法重载? 3.被称为方法重载的必要条件是什么? 4.编译器是如何识别出相同名字的方法的呢? ...
keil5的安装详解(看完必会，不会你打我)
如何安装KEIL5 本内容所涉及的软件只供教学使用,不得用于商业用途.个人或公司因商业用途导致的法律责任,后果自负. 温馨提示 1.安装路径不能带中文,必须是英文路径 2.安装目录不能跟51的KEIL ...
WebApi路由机制详解——看完不会用你打我
随着前后端分离的大热,WebApi在项目中的作用也是越来越重要,由于公司的原因我之前一直没有机会参与前后端分离的项目,但WebApi还是要学的呀,因为这东西确实很有用,可单独部署.与前端和App交互都 ...
python虚拟环境管理工具_Python虚拟环境和包管理工具Pipenv的使用详解--看完这一篇就够了...
前言 Python虚拟环境是一个虚拟化,从电脑独立开辟出来的环境.在这个虚拟环境中,我们可以pip安装各个项目不同的依赖包,从全局中隔离出来,利于管理. 传统的Python虚拟环境有virtualen ...
spring注解详解,看完你就都全懂了!!
转载:https://blog.csdn.net/walkerjong/article/details/7946109

CSS3动画属性 animation详解（看完就会）

keyframes

动画相关的值

animation-name animation-duration

animation-timing-function animation-delay

animation-iteration-count animation-play-state

animation-direction animation-fill-mode

animation

CSS3动画属性 animation详解（看完就会）相关推荐

最新文章

热门文章