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);
    }
}
复制代码

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

查看所有标签

猜你喜欢:

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

Servlet&JSP学习笔记

Servlet&JSP学习笔记

林信良 / 清华大学出版社 / 2010-4 / 48.00元

《Servlet&JSP学习笔记》以“在线书签”项目贯穿全书,随着每一章的讲述都在适当的时候将 Servlet & JSP技术应用于“在线书签”程序之中,并作适当修改,以了解完整的应用程序构建方法。《Servlet&JSP学习笔记》内容包括简单的Web应用程序,开发简单的Servlet & JSP合理管理,JSP的使用,整合数据库等相关内容,《Servlet&JSP学习笔记》适合Servlet ......一起来看看 《Servlet&JSP学习笔记》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换