CSS3-animation总结
本文最后更新于 1734 天前,其中的信息可能已经有所发展或是发生改变。

经常忘记参数的顺序及含义,做个总结方便日后查看

语法结构(简写)

animation: name duration timing-function delay iteration-count direction fill-mode;

举例:

.dom {
    animation: wang 3s linear 1s infinite alternate forwards ;
}

含义:
动画名称:wang
动画持续时间:3 秒
动画速度:匀速
动画延迟:1 秒
动画播放次数:无限次播放
动画是否反向播放:是反向播放
动画播放前后是否可见:动画结束保留在最后一帧

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

参数含义

1. animation-name

规定需要绑定到选择器的 keyframe 名称。

语法:

animation-name: keyframename |none;
描述
keyframename 规定需要绑定到选择器的 keyframe 的名称。
none 规定无动画效果(可用于覆盖来自级联的动画)。

2. animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

语法:

animation-duration: time;
描述
time 规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。

3. animation-timing-function

规定动画的速度曲线。

语法:

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

描述 测试
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4. animation-delay

规定在动画开始之前的延迟。

语法:

animation-delay: time ;
描述 测试
time 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。 测试

5. animation-iteration-count

规定动画应该播放的次数。

语法:

animation-iteration-count: n |infinite;
描述 测试
n 定义动画播放次数的数值。 测试
infinite 规定动画应该无限次播放。 测试

6. animation-direction

规定是否应该轮流反向播放动画。

语法:

animation-direction: normal|alternate;
描述 测试
normal 默认值。动画应该正常播放。 测试
alternate 动画应该轮流反向播放。 测试

7. animation-fill-mode

规定动画在播放之前或之后,其动画效果是否可见。

语法:

animation-fill-mode : none | forwards | backwards | both;
描述
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。
标题:CSS3-animation总结
地址:https://xiaodongxier.com/38.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇