CSS(五):动画

WBOY
WBOYasal
2016-08-18 08:58:011250semak imbas
  • animation-name

动画名称
语法:animation-name:none|
元素所定义的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。

 

  • @keyframes

语法:
@keyframes {
[from|to|]{sRules}[,*]
}
被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

<span style="color: #008080;">1</span> <span style="color: #000000;">/*定义一个名为"fromLeftToRight"的向右移动的动画*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">@keyframes fromLeftToRight{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    from{margin:0;}
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    to{margin:100px;}
</span><span style="color: #008080;">5</span> }
  • animation-duration

设置动画的持续时间
语法:animation-duration:

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并持续一秒时间*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;">5</span> }
  • animation-timing-function

动画的过渡速度类型
语法:animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,持续一秒时间,并且过渡类型为ease-in*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> }
  • animation-delay

设置动画的延迟时间
语法:animation-delay:

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果,延迟一秒后执行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-delay: 1s;
</span><span style="color: #008080;">7</span> }
  • animation-iteration-count

设置动画的执行次数
语法:animation-iteration-count: infinite|
infinite表示无限次数

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果,执行两次后停止*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 2;
</span><span style="color: #008080;">7</span> }
  • animation-direction

设置动画在循环中是否按照相反顺序执行
语法:animation-direction: normal|reverse|alternate|alternate-reverse
说明:
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并且反复运行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-direction: alternate;
</span><span style="color: #008080;">8</span> }
  • animation-fill-mode

设置动画开始结束的状态
语法:animation-fill-mode: none|forwards|backwards|both
说明:
none:默认值。不设置动画的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并且动画结束后元素位于动画结束时的位置*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 3;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-fill-mode: forwards;
</span><span style="color: #008080;">8</span> }
  • animation-play-state

设置动画的播放状态
语法:animation-play-state: running|paused

<span style="color: #008080;"> 1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并且当div处于hover状态时暂停动画*/
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">    animation-name:fromLeftToRight;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    animation-duration:1s;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">div:hover{
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    animation-play-state: paused;
</span><span style="color: #008080;">10</span> }
  • animation

动画的简写属性
语法:
animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || || [ ,*]

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn