css过渡和动画

1,过渡特效transition
四个主要内容:过渡CSS属性名称、过渡执行时间、过渡时间速率曲线、过渡延时执行
① 过渡基础实现:(过渡一定要给时间)

② 过渡的四个属性:
A,transition-property执行变换的属性
Br,transition-dustion过渡执行的时间
C,transition-timing-function过渡时间曲线
D,transition-delay过渡延迟
组合值transition:(注意书写顺序,否则执行不了)

2,CSS动画animation
其可以让元素随着时间的推移,产生“位置”、“形状”、“颜色”、“大小”、“透明度”等属性变化。
注意:设置动画过程中
A,动画的基本实现:(名称和时间必须给)

B,动画的几个属性:
1,动画的名称animation-name
2,动画执行时间animation-duration
3,动画时间曲线animation-timing-function
4, 动画时间的延迟animation-delay
5,动画播放的次数animation-iteration-count
6,动画周期逆向播放animation-direction
7,动画的播放和暂停animation-play-state(running/paused)
8,设定元素动画形态animation-fill-mode
组合值写法animation:

上例中是一种将“animation”中所有支持的值都罗列的形式,在实际操作中,是可以根据需要“选取”所需要的值进行组合的

猜你喜欢

转载自blog.csdn.net/weixin_43748930/article/details/84840786