1、过渡属性(transition)
优点:-通过过渡可以指定一个属性发生变化时的切换方式
-在某种条件下可以触发,例如hover情况下
-IE10开始兼容,移动端兼容良好
-通过过渡可以创建一些非常好的效果,提升用户体验
属性(4个)
(1)transition-property 指定执行过渡的属性,多个属性,使用逗号隔开,
如果所有的属性都要过渡,就使用all关键词,大部分属性都支持过渡效果
注意过渡时,必须是从一个有效数值向另一个有效数值进行过渡
只要值可以计算的,就可以过渡
(2)transition-duration 指定过渡效果的持续时间
时间的单位:s和ms 1s=1000ms
(3)transition-timing-function: ;过渡的时序函数
指定过渡的执行的方式
可选值: ease 默认值,慢速开始,先加速,然后再减速
linear 匀速运动
ease-in 慢速开始,加速运动
ease-out 快速开始,减速运动
ease-in-out
steps()分布执行过渡效果
(4)transition-delay: ;过渡效果的延迟,等待一段时间后执行过渡
transition:;可以同时设置过渡相关的所有属性,
只有一个要求,如果要写延迟,则两个时间中,第一个写延迟,第二个写持续时间
2、动画(animation)
第一步:设置关键帧
@keyframes text {
from表示动画开始位置 也可以使用0%
from {
margin-left: 0;
}
to动画的结束位置 也可以使用100%
to {
margin-left: 500px;
}
}
第二步 设置animation
1:animation-name
设置动画的名字,和@keyframs相对应
2:animation-duration
动画执行时间 duration [djuə'reiʃən]
3:animation-delay
动画执行延时
4:animation-timing-function
动画执行的方式
5:animation-iteration-count [,itə'reiʃən]
动画执行的次数
可选值:次数(数字)
infinite 无限循环
6:animation-direction
指定动画运行的方向
可选值
normal 默认值: 从from向to运行,每次都是这样
reverse 从to到from运行,每次都是这样
alternate 从from向to运行,重复执行动画时反向执行
alternate-reverse 从to向from运行,重复执行动画时反向执行
7:animation-play-state
设置动画的执行状态
可选值:running 默认值 动画执行
paused 动画暂停
8:animation-fill-mode
动画的填充模式
可选值:
none默认值 动画执行完毕 元素回到原来的位置
forwards 动画执行完毕,会停止在动画结束的位置
ackwards 动画延时等待时,元素就会处于开始位置
both 结合了forwards和ackwards的特点
9:简写模式
animation: text 2s 2 2s alternate-reverse; (其中,类型 时间)