- 过渡和动画之间的异同
1.1 不同点
- 过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2 相同点
-
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>100-动画模块</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 50px; background-color: red; /*transition-property: margin-left;*/ /*transition-duration: 3s;*/ /*1.告诉系统需要执行哪个动画*/ animation-name: lnj; /*3.告诉系统动画持续的时长*/ animation-duration: 3s; } /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/ @keyframes lnj { from{ margin-left: 0; } to{ margin-left: 500px; } } /*div:hover{*/ /*margin-left: 500px;*/ /*}*/ </style> </head> <body>
/*告诉系统多少秒之后开始执行动画*/ animation-delay: 2s; /*告诉系统动画执行的速度*/ animation-timing-function: linear;
取值：linear
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。
| ease-in | 动画以低速开始。
| ease-out | 动画以低速结束。
| ease-in-out | 动画以低速开始和结束。
| cubic-bezier(n,n,n,n) |在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
/*告诉系统动画需要执行几次*/
animation-iteration-count: 3;
/*告诉系统是否需要执行往返动画
取值:
normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate, 往返动画, 执行完一次之后往回执行下一次
*/
animation-direction: alternate;
/*
告诉系统当前动画是否需要暂停
取值:
running: 执行动画
paused: 暂停动画
*/
animation-play-state: paused;
3.通过我们的观察, 动画是有一定的状态的
- 等待状态
- 执行状态
- 结束状态
-
animation-fill-mode作用:
指定动画等待状态和结束状态的样式
取值:
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式/*animation-fill-mode: backwards;*/ /*animation-fill-mode: forwards;*/ animation-fill-mode: both; 动画模块连写
5.1. 动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
animation: name duration timing-function delay iteration-count direction;
5.2. 动画模块连写格式的简写
animation:动画名称 动画时长;
