-
过度 transition
使元素由一种样式变成另一种样式 (尽量不要写到伪类中)
过度transition的值: transition是一个复合属性: 类似于background, 其中：
transition-property: 规定过渡作用在元素的哪条样式上
none:没有过渡属性(清除); all:对所有可能样式生效(默认值); width/height/… 多个以逗号分隔
transition-duration:
过渡时长, 单位秒(s)和毫秒(ms)值是0，不写时长等于看不到效果
transition-delay:
过渡开始前的等待时间， 不计入过渡时间中
注意： transition-delay在恢复也生效
transition-timing-function: (过渡时间的速度函数), 常见值如下:
ease,先慢后快后慢(默认值); linear,匀速 , ease-in; 匀加速, ease-out； 匀减速, ease-in-out; 快->慢->快
cubic-bezier(贝塞尔曲线): 一个带参数的曲线，用于描述运动速度的变化，可以非常精确自由方便的控制变化速率
cubic-bezier(x1,y1,x2,y2); 其中x1,x2在[0,1]中,y1,y2不限, 具体参考:http://cubic-bezier.com
transition复合写法:
transition: 作用样式 时长 变化曲线 延时 (只有时长不可省略)
.box {
width: 100px;
height: 100px;
trnnsition-property: width; /* 只有宽度有过度效果 */
transition-duration: 1s;
transition-delay: 1s; /* 变化延时一秒才触发 */
transition-timing-function: linear;
/* transition: width 1s linear 0.5s */ /* 复合写法 */
}
-
动画 animation
自定义动画: @keyframes
最小0%,最大100%；合法样式任意多个，每个百分比为关键帧
@keyframes move { /* 关键帧描述, 用来给animation运动的 */
from { /* 关键帧 开始 */
width: 100px;
}
to { /* 结束 */
width: 300xp;
}
/* 0% {
width: 100px;
}
50% {
width: 300px;
}
100% {
width: 200px;
} */
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: move; /* 自定义动画名称 */
animation-duration: 2s; /* 动画执行时间 */
animation-delay: 2s; /* 延时, 负数代表提前运动 */
/* animation: 2s move; */ /* 复合写法 */
}
animation-name 自定义动画名称, (调用自定义动画)
animation-duration 动画执行时长（s/ms）
animation-delay： (支持负数)
动画延时（s/ms）
animation-timing-function 动画速度曲线
linear/ease/ease-in/ease-out/ease-in-out和cubic-bezier(x1,y1,x2,y2), 类似于transition-timing-function steps(n) 逐帧动画
animation-iteration-count 次数数值
infinite（关键词，无限重复次数）
animation-direction 执行方向与执行状态
normal正常, alternate正反轮流播放(需要多次运动,才能看到效果)
animation-play-state:paused暂停动画, running运行动画
animation-fill-mode: 动画结束之后的状态 (只能运用于结束动画之后)
none;不改变（默认）
forwards: 动画完成停留在最后一个关键帧中
backwards: 在动画开始之前的延时阶段，应用0%的关键帧
both: 向前向后都应用
animation-direction: 动画的播放方向 (多次运动才能触发次效果)
normal; (正常播放，结束后会回到起点，默认)
alternate: 播放结束之后反向回到开头,偶数次反向
reverse：反向播放，和normal相反
alternate-reverse：先反后正，和alternate相反
animation复合写法:
animation：动画名 时长 运动速度曲线 延时 运动次数 播放方向
animation: move 3s linear 0s infinite alternate-reverse;
