CSS3 Animation

  animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 

一、animation-name:

语法:

  animation-name: none | IDENT[,none | IDENT]*;

取值说明:

animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

二、animation-duration:

语法:

  animation-duration: <time>[,<time>]*

取值说明:

animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。

三、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>)]*

取值说明:

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。

四、animation-delay:

语法:

  animation-delay: <time>[,<time>]*

取值说明:

animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。

五、animation-iteration-count

语法:

  animation-iteration-count:infinite | <number> [, infinite | <number>]*

取值说明:

animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。

六、animation-direction

语法:

  animation-direction: normal | alternate [, normal | alternate]*

取值说明:

animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

七、animation-play-state

语法:

   animation-play-state:running | paused [, running | paused]*

取值说明:

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。

CSS3 Animation,布布扣,bubuko.com

时间: 2024-11-03 05:32:52

CSS3 Animation的相关文章

css3 animation动画对应属性解释

animation Value:     [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animatio

实现了一个百度首页的彩蛋——CSS3 Animation简介

在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩蛋 简单来说可以分三步: 1.实现一些css动画类,等待调用: 2.设立关键字与动画匹配方法: 3.每当页面加载完成,根据关键字为body添加指定动画类. 查看DEMO:百度搜索彩蛋 CSS3 Animation animation: name duration timing-function de

2016.2.20 css3 animation 的学习

使用css3 animation动画 'use strict'; var mousex, mousey; function tuo(el) { var move = function () { el.style.left = event.x - mousex + 'px'; el.style.top = event.y - mousey + 'px'; }; el.addEventListener('mousedown', function () { mousex = event.x - el.

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

css3 animation动画技巧

一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更顺畅,css3动画如何做弧线动画,css3动画是否有动画库,css3帧动画如何快速简单……   为了解决这些折磨人的问题,我们今天来分析一下: 首先介绍css3 Animation动画库: http://daneden.github.io/animate.css/ 基本涵盖了我们常见的基础css3动

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需要了解的同学可先移步 MDN),而是结合实际的开发经验,介绍 css3 animation 属性的一些使用场景及技巧. 1. animation-delay MDN 中的介绍: animation-delay CSS 属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度. 该属性值

CSS3(animation, trasfrom)总结

CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @keyframes  [样式名] { 0% {left: 10px ; top : 20px;} 50% {left: 20px ; top : 30px;} 100% {left: 10px ; top : 20px;} }; Firefox @-mz-keyframes  [样式名] { 0% {

CSS3 animation属性

CSS3 animation属性 @import @media @font-face @keyframes 当我们使用@keyframes定义好了一个动画,它并不会执行产生任何效果,直到我们通过animation属性将动画应用到相应元素上. 对于 CSS3 animation 属性其完整的语法如下: animation: name duration timing-function delay iteration-count direction; name是使用@keyframes定义好的关键帧名

css3 animation 的基础认识.

css3 中的 animation属性主要用来做动画的,详细的文章看:http://www.w3cplus.com/content/css3-animation 调用animation的方法:animation-name(动画名称) animation-duration(播放动画的总时长) animation-timing-function(动画的播放方式: ease  ease-in  ease-in-out linear  cubic-bezier ) animation-delay(动画开