CSS动画简介:
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
CSS中的transform与transition:
https://www.cnblogs.com/lay-3377/p/5891036.html
- transition的作用在于,指定状态变化所需要的时间。
transition: 1s;
表示持续1秒时间。
transition: 1s height;
表示 height的变化需要1秒,其它依然瞬时完成。
transition: 1s height, 1s width;
表示 height和 width的变化需要 1秒。
transition: 1s height, 1s 2s width;
表示height和 width的变化需要 1秒,但 width延迟2秒执行。 - cubic-bezier 登录该网站来确定:http://cubic-bezier.com/#.17,.67,.83,.67
transition-property: height;
transition-duration: 1s;
transition-delay: 2s;
transition-timing-function: ease;
transition需要事件触发,所以没法在网页加载时自动发生。
transition是一次性的,不能重复发生,除非一再触发。
transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 - animation 需要指定动画一个周期持续的时间,以及动画效果的名称。需要用keyframes关键字
注意状态之间 没有逗号, 0%可以用from代表,100%可以用to代表
animation: 1s rainbow;
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
animation: 1s rainbox infinite;
默认动画执行一次,使用infinite表示无限次
动画结束以后,会立即从结束状态跳回到起始状态。animation-fill-mode: forwards;
表示让动画停留在结束状态
animation-direction: normal|reverse;
动画播放的方向,reverse表示从结束状态到开始状态播放 animation: 1s 2s rainbow linear 3 forwards normal;
具体写就是:
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 2s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。
如果想让动画保持突然终止时的状态,就要使用animation-play-state属性:
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;}- transform:转换
对元素进行移动 translate(30px,60px), 其中:left(x坐标)、top(y坐标)
缩放 scale(1.5, 0.8); 宽度变为原来的1.5倍,高度变为原来的0.8倍
旋转 rotate(20deg) ,正值顺时针旋转,负值逆时针旋转
翻转 skew(20deg, 20deg); 围绕 X 轴把元素翻转20度,围绕 Y 轴翻转20度