动画属性简介

效益:通过给元素增多animation属性,能够给予该成分动画成效。

前日说一说 CSS3 标准的卡通属性:

css三 animation 动画属性简单介绍,css3animation

animation 动画属性介绍

 

animation 属性是两个简写属性,用于安装动画属性:

一. animation-name—-规定须要绑定到采纳器的 keyframe 名称。

语法:animation-name: keyframename|none;

Keyframename:规定亟待绑定到选取器的 keyframe 的名号。

None: 规定无动画效果(可用以覆盖来自级联的卡通)。

 

例如:

{

-webkit-animation-name: my_animation;

-moz-animation-name:my_animation;

-ms-animation-name:my_animation;

-o-animation-name: my_animation;

animation-name: my_animation;

}

@-webkit-keyframes my_animation{} 

@-moz-keyframes my_animation{}

@-ms-keyframes my_animation{}

@-o-keyframes my_animation{}

@keyframes my_animation{}

 

二. animation-duration—-规定落成动画所开销的时辰,以秒或阿秒计。

语法:animation-duration: time;

time : 规定达成动画所费用的日子。暗许值是 0,意味着未有动画效果。

例如:

{

-webkit-animation-duration: 2s;

动画属性简介。-moz-animation-duration:2s;

-ms-animation-duration:2s;

-o-animation-duration: 2s;

animation–duration: 2s;

}

三. animation-timing-function—-分明动画的速度曲线

语法:animation-timing-function: value;

Value值:

linear:动画原原本本的速度是同等的。

ease:暗中认可。动画以低速初叶,然后加快,在收尾前变慢。

ease-in:动画以低速初始。

ease-out :动画以低速甘休。

ease-in-out:动画以低速初阶和终结。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中温馨的值。或然的值是从 0 到 一 的数值。

例如:

{animation-timing-function:linear;}

{animation-timing-function:ease;}

{animation-timing-function:ease-in;}

{animation-timing-function:ease-out;}

{animation-timing-function:ease-in-out;}

 

四. animation-delay—-规定在动画起初在此以前的推移

语法:animation-delay: time;

Time值:可选。定义动画开端前等候的年月,以秒或皮秒计。私下认可值是 0。允许负值,-二s 使动画立时开头,但跳过 2 秒进入动画。

{

animation-delay:2s;

-webkit-animation-delay:2s;

}

 

5. animation-iteration-count—-鲜明动画应该播放的次数

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

n:定义动画播放次数的数值。

infinite:规定动画应该Infiniti次播放。暗中认可值为:一。

示例:

{

animation-iteration-count:infinite;

-webkit-animation-iteration-count:infinite;

}

陆. animation-direction—-分明是不是相应轮流反向播放动画

语法:animation-direction: normal|alternate;

normal:暗中同意值。动画应该符合规律播放。

alternate :动画应该轮流反向播放。

申明:假如把动画设置为只播放叁回,则该属性未有效能。

示例:

{

animation-direction:alternate;

-webkit-animation-direction:alternate;

}

柒. animation-play-state 属性规定动画正在运作依然暂停

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

paused:规定动画已暂停。

running:规定动画正在播放。

声明:可以在 JavaScript 中利用该属性,那样就能够在播报进程中暂停动画。

示例:

{

animation-play-state:running;

-webkit-animation-play-state:running;

}

8. animation-fill-mode 属性规定动画在播放此前或未来,其动画效果是或不是可知

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

none:不变暗中同意行为。

forwards :当动画完了后,保持最后三个属性值(在最后三个根本帧中定义)。

backwards:在 animation-delay 所钦赐的一段时间内,在动画展现在此之前,应用起来属性值(在第1个首要帧中定义)。

both :向前和向后填充形式都被选拔。

animation 动画属性简要介绍,css三animation
animation动画属性介绍 animation属性是2个简写属性,用于安装动画属性:
一.animation-name—-规定必要绑定…

CSS3的Animation有几个性子:
animation-name
活动的名号(规定亟待绑定的keyframe 名称)

<!DOCTYPE
html>
<html>
   
<head>
       
<style> 
         
div{width:100px;height:100px;background:red;animation:my 5s;}
          @keyframes
my
         {
             
0%{background:red;width:100px;}
             
100%{background:blue;width:200px;}
         }
       
</style>
   
</head>
   
<body>
       
<div></div>
   
</body>
</html>

正文是依照w3cschool在线教程的官方网址实现的。先贴出官英特网提交的实例代码和周转结果的截图

animation-duration
挪动时间

最常用的两种属性有以下二种:

图片 1

animation-delay
运动延迟时间

一、animation-name(动画名称)

演示代码

animation-iteration-count
明确动画播放的次数(infinite表示无比次广播)

 animation-name属性是必须存在的,因为animation-name的值暗中认可是none,没有动画。

图片 2

animation-direction
鲜明是或不是应当轮流反向播放动画。
(normal正常播放,默许值;
alternate:轮流反向播放;)

2、animation-duration(动画实行一次所需时间)

运转结果(动图)

animation-play-state
规定动画正在运营照旧暂停。
(paused:规定动画已暂停;
running:规定动画正在播放。)

 animation-duration属性也是必须存在的,因为animation-duration的值默认是0,未有动画。

语法:

animation-fill-mode
动画在播报以前或之后,其动画效果是还是不是可知。
(none:不转移默许行为;
forwards:当动画变成后,保持尾数属性值(在最终三个根本帧中定义);
backwards:在 animation-delay
所内定的一段时间内,在动画展现之前,应用起来属性值(在第一个首要帧中定义);
both:向前和向后填充格局都被选拔;)

三、animation-delay(动画在初阶前的延迟时间)

animation:name duration timing-function delay iteration-count
direction

animation-timing-function
分明动画的进程曲线
(linear:匀速;
ease:低速初步,加速,结束前变慢;
ease-in:加速;
ease-out:减速;
ease-in-out:低速开首和甘休;
cubic-bezier(n,n,n,n):在 cubic-bezier
函数中温馨的值。恐怕的值是从 0 到 一 的数值)。

 animation-delay的值能够是秒(s)大概是微秒(ms),暗许值是0,未有延迟。

看一下顺序参数的行使办法:

用css3的animation完毕一个动画,当唯有那几个动画达成时才施行另1个轩然大波。有三种格局:
一、设置停车计时器:
设定1个和动画片时间长度一样的time,过time事件去实施那个函数。
setTimeout(function(){ },time);
2、当-webkit-animation动画甘休时有一个webkitAnimationEnd事件,只要监听那个事件就足以了。
分化浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd
MSAnimationEnd oanimationend animationend)
例子:
-webkit-animation动画其实有四个事件:
开始事件 webkitAnimationStart
终止事件 webkitAnimationEnd
再也活动事件 webkitAnimationIteration
代码如下:

网站地图xml地图