关键字:transition,animations,关键帧 @keyframs
CSS过渡
过渡可以为某一个元素在不同状态之间切换时,定义不同的过渡效果。
比如在不同的伪元素(:hover、:active)或通过JS实现的状态变化
transition属性是一下属性的简写属性
属性 | 含义 |
---|---|
transition-property | 规定应用过渡的CSS属性的名称 。默认为all |
transition-duration | 规定过渡效果的完成时长。默认是0s |
transition-timing-function | 规定过渡效果的时间曲线。默认是ease |
ransition-delaay | 规定从元素加载完成到执行过渡效果的延迟时间。默认为0s |
简写语法
div {
transition:<property> <duration> <timing-function> <delay>
}
过渡实例
例子① 鼠标悬停时4s过渡改变字体大小,0.5s延迟
div {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 0.5s;
font-size: 14px;
}
div:hover {
font-size: 36px;
}
CSS动画
animations:从一个CSS样式配置转换到另一个CSS样式配置。
动画包括两个部分:①描述动画的样式规则 ②用于指定动画开始、结束以及中间点样式的关键帧
配置动画
animation子属性 | 功能描述 |
---|---|
animation-delay | 设置延时,即从元素加载完成到动画序列开始执行的时间 |
animation-direction | 设置动画每次运行完后是反向运行还是回到开始位置重复运行 |
animation-duration | 设置动画一个周期的时长 |
animation-iteration-count | 设置动画重复次数,可以指定infinite无限次重复动画 |
animation-name | 设置@keyframes描述的关键帧名称 |
animation-play-state | 允许暂停和恢复动画 |
animation-timing-function | 设置动画速度,即通过建立加速度曲线,设置动画在关键帧之间是如何变化 |
animation-fill-mode | 指定动画执行前后如何为目标元素应用样式 |
animation-direction可取值 | 含义 |
---|---|
normal | 正常速度播放 |
reverse | 反向播放 |
alternate | 奇数次正向播放,偶数次反向播放 |
alternate-reverse | 奇数次反向播放,偶数次正向播放 |
animation-timing-function可取值 | 含义 |
---|---|
linear | 匀速 |
ease | 慢-快-慢 |
ease-in | 低速开始 |
ease-out | 低速结束 |
ease-in-out | 低速开始和结束 |
使用keyframes定义动画序列
通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
关键帧使用percentage指定动画发生的时间点。0%表示动画发生的第一时刻,100%表示最终时刻。(别名:0% => from、100% => to)
两个时间点都是可选的,其中一个未指定时,使用计算值开始或结束动画。
动画实例
例子①动画实现p段落从左边滑入,持续时间3s
p {
animation-duration: 3s;
animation-name: slidein;
/* animation-iteration-count: infinite; */
animation-direction: alternate;
}
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
注意:webkit内核浏览器或者早期版本浏览器可能需要 -webkit-前缀
过渡效果和动画效果的异同
- 相同点:两个属性都可以使元素动起来
- 不同点:
- transition需要有一个事件(:hover,:active)才可以触发,animation不需要
- transition只能定义一组(开始,结束)关键帧, animation可以定义多组关键帧