首页 > 代码库 > css动画

css动画

1.css过渡:通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变
换为另一种样式时为元素添加效果。

2.过渡属性名:transition(简写属性):规定要使用哪个属性(名称);效果时长(以秒为单位,默认
值为0);配合hover效果使用

3.transition四种属性值:transition-property:规定应用过渡的 CSS 属性的名称。
transition-duration:定义过渡效果花费的时间。默认是 0。
transition——timing-function:规定过渡效果的时间曲线。默认是 "ease"。
transition-delay:规定过渡效果何时开始。默认是 0。

4.css动画:css@keyframes规则;css@keyframes规则用于创建动画。在css@keyframes中规定某种样式,
就能创建动画效果

5.css@keyframes创建动画时必须要绑定某个选择器:1.规定动画的名称(自取)2.规定动画的时长(以
秒为单位)

6.动画属性(animation)值:1.animation:所有动画属性的简写属性,除了 animation-play-state 属
性。
2.animation-name 规定 @keyframes 动画的名称。 3.
3.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
4.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
5.animation-delay 规定动画何时开始。默认是 0。
6.animation-iteration-count 规定动画被播放的次数。默认是 1。
7.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
8.animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
9.animation-fill-mode 规定对象动画时间之外的状态。

 

css动画