CSS3动画属性之Animation

栏目: CSS · 发布时间: 5年前

内容简介:Animation 是 CSS3 属性中,除了 transform、transiton 之外的一个动画属性。具体有:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。语法:

Animation 是 CSS3 属性中,除了 transform、transiton 之外的一个动画属性。

具体有:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。

二、庖丁解牛

2.1 animation-name

语法: animation-name: none | index; 规定需要绑定到选择器的 keyframe 名称。

keyframe 关键帧

可以为动画变化的关键位置设置一定的顺序。

它的规则是 @keyframes 名称 {...} (注意要加 s,不然无法识别规则。)

有两种写法,一种是 0% - 100%,中间可以创建多个百分比给元素加上动画效果。

假设自定义 keyfram 名称为:index

@keyframes index {
    0% {
        /* ... */
    }
    50% {
        /* ... */
    }
    100% {
        /* ... */
    }
}
复制代码

另外一种写法是,from - to,from 相当于 0%,to 相当于100%,中间正常添加百分比。

@keyframes index {
    from {
        /* ... */
    }
    50% {
        /* ... */
    }
    to {
        /* ... */
    }
}
复制代码

2.2 animation-duration

语法: animation-duration: time;

规定完成动画所花费的时间**(持续时间)**,单位为秒或毫秒。

2.3 animation-timing-function

语法: animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

规定动画的速度曲线。

2.4 animation-delay

语法: animation-delay: time;

规定在动画开始之前的 延迟时间 ,单位为秒或毫秒。

2.5 animation-iteration-count (迭代次数)

语法: animation-iteration-count: infinite | number;

规定动画应该反复播放的次数**(迭代次数)**。

2.6 animation-direction (播放方向)

语法: animation-direction: normal | reverse | alternate | alternate-reverse;

规定动画播放的方向。

normal:默认值,正向播放。

reverse:反向播放。

alternate:偶数次反向播放、奇数次正向播放。

alternate-reverse:奇数次反向播放、偶数次正向播放。

2.7 animation-fill-mode (填充模式)

语法: animation-fill-mode: none | forwards | backwards | both;

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

none:不改变默认行为。

forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。

2.8 animation-play-state (播放状态)

语法: animation-play-state: running | paused

规定动画正在运行还是暂停,即控制动画播放状态。

running:默认值,动画正常播放。

paused:动画暂停。

三、小试牛刀

CSS3动画属性之Animation

html:

<div class="box">Animation</div>
复制代码
.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: index 2s ease-in .2s 3 normal both;
}
/* @keyframes index {
    0% {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    100% {
        transform: rotate(180deg)
    }
} */
@keyframes index {
    from {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    to {
        transform: rotate(180deg);
    }
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Practical JavaScript, DOM Scripting and Ajax Projects

Practical JavaScript, DOM Scripting and Ajax Projects

Frank Zammetti / Apress / April 16, 2007 / $44.99

http://www.amazon.com/exec/obidos/tg/detail/-/1590598164/ Book Description Practical JavaScript, DOM, and Ajax Projects is ideal for web developers already experienced in JavaScript who want to ......一起来看看 《Practical JavaScript, DOM Scripting and Ajax Projects》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试