CSS3动画以及animation事件

时间：2017-08-26 18:22:47 阅读：211 评论：0 收藏：0 [点我收藏+]

标签：播放 blog 结束一个等于 css3动画 microsoft 名称 soft

1、CSS3动画以及animation事件的定义

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

animation-name:动画名称　　　　animation-name：keyframename|none(keyframename:自定义名字 none:动画无效果)

animation-duration:动画执行时间 animation-duration:time(time:秒/毫秒)

animation-timing-function:动画速度曲线

【

animation-timing-function：value;

linnear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

ease:规定以慢速开始的过渡效果（等于 cubic-bezier(0.25,0.1,0.25,1)）

ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）

ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值，可能的数值在0~1之间

steps(n):阶跃函数

】

animation-delay:动画效果延迟时间　　animation-delay:time(time:秒/毫秒)

animation-iteration-count:动画执行次数　　animation-iteration-count:n|infinite（n:具体次数、infinite：无限重复）

animation-direction:动画执行方向　　　animation-direction：normal|alternate(normal:动画顺序播放、alternate:动画轮流反向播放)

animation-play-state:动画执行状态　　animation-play-state:pause | running(paused:暂停动画、running:运行动画)

animation-fill-mode:动画执行过程效果是否可见　

【

animation-fill-mode:none | forwards | backwards | both (none:不改变[默认值]、forwards：当动画完成后，保持最后一个属性值[在最后一个关键帧中定义]) 、backwords:在animation所指定的一段时间内，在动画显示前，应运开始属性值（在第一个关键帧中定义）、both:向前后相后填充模式都被应用

】

@keyframes:规定动画

@keyframes animationname {keyframes-selector{css-styles;}}

【

keyframes-selector :动画时长百分比

0~100%

from(与0%相同)

to(与100%相同)

可以只有一个to

css-styles:一个或者多个合法的css样式属性

】

动画事件：

动画开始：obj.addEventListener("webkitAnimationStart",fn);//Chrome浏览器兼容模式

　　　　　obj.addEventListener("animationstart",fn);//其他兼容浏览器

动画执行过程中触发：

　　　　　obj.addEventListener("webkitAnimationIteration",fn);

　　　　　obj.addEventListener("animationIteration",fn);

动画结束后触发：

　　　　　obj.addEventListener("webkitAnimationEnd",fn);

　　　　　obj.addEventListener("animationEnd",fn);

2、CSS3动画以及animation事件应用示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation事件</title>
<style>
{
margin:0;
padding: 0;
}
div{
width: 100px;
height: 300px;
background: #666;
animation: anim 2s 1s linear 3 alternate forwards ;/第一个time是动画改变的1时间，第二个是开始之前的延时*/
}
@keyframes anim {
0%{width: 50px;}
100%{width: 300px;}
}
</style>
</head>
<body>
<div id="div"></div>
<script>
var oDiv = document.getElementById("div");
oDiv.addEventListener("webkitAnimationStart",start);
oDiv.addEventListener("animationStart",start);
oDiv.addEventListener("webkitAnimationIteration",iteration);
oDiv.addEventListener("animationIteration",iteration);
oDiv.addEventListener("webkitAnimationEnd",end);
oDiv.addEventListener("animationEnd",end);
function start() {
oDiv.style.background = "red";
}
function iteration() {
oDiv.style.background = "green";
}
function end() {
oDiv.style.background = "blue";
}
</script>
</body>
</html>

3、示例效果图

技术分享

示例源码：animation事件.zip

转载请注明出处，谢谢您的合作！

CSS3动画以及animation事件

标签：播放 blog 结束一个等于 css3动画 microsoft 名称 soft

原文地址：http://www.cnblogs.com/qikeyishu/p/7435336.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

CSS3动画以及animation事件

1、CSS3动画以及animation事件的定义

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

animation-name:动画名称 animation-name：keyframename|none(keyframename:自定义名字 none:动画无效果)

animation-duration:动画执行时间 animation-duration:time(time:秒/毫秒)

animation-timing-function:动画速度曲线

【

animation-timing-function：value;

linnear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

ease:规定以慢速开始的过渡效果（等于 cubic-bezier(0.25,0.1,0.25,1)）

ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）

ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值，可能的数值在0~1之间

steps(n):阶跃函数

】

animation-delay:动画效果延迟时间 animation-delay:time(time:秒/毫秒)

animation-iteration-count:动画执行次数 animation-iteration-count:n|infinite（n:具体次数 、infinite：无限重复）

animation-direction:动画执行方向 animation-direction：normal|alternate(normal:动画顺序播放、alternate:动画轮流反向播放)

animation-play-state:动画执行状态 animation-play-state:pause | running(paused:暂停动画、running:运行动画)

animation-fill-mode:动画执行过程效果是否可见

@keyframes:规定动画

@keyframes animationname {keyframes-selector{css-styles;}}

keyframes-selector :动画时长百分比

0~100%

from(与0%相同)

to(与100%相同)

可以只有一个to

css-styles:一个或者多个合法的css样式属性

动画事件：

动画开始：obj.addEventListener("webkitAnimationStart",fn);//Chrome浏览器兼容模式

obj.addEventListener("animationstart",fn);//其他兼容浏览器

动画执行过程中触发：

obj.addEventListener("webkitAnimationIteration",fn);

obj.addEventListener("animationIteration",fn);

动画结束后触发：

obj.addEventListener("webkitAnimationEnd",fn);

obj.addEventListener("animationEnd",fn);

2、CSS3动画以及animation事件应用示例代码

3、示例效果图

示例源码：animation事件.zip

转载请注明出处，谢谢您的合作！

animation-name:动画名称　　　　animation-name：keyframename|none(keyframename:自定义名字 none:动画无效果)

animation-delay:动画效果延迟时间　　animation-delay:time(time:秒/毫秒)

animation-iteration-count:动画执行次数　　animation-iteration-count:n|infinite（n:具体次数、infinite：无限重复）

animation-direction:动画执行方向　　　animation-direction：normal|alternate(normal:动画顺序播放、alternate:动画轮流反向播放)

animation-play-state:动画执行状态　　animation-play-state:pause | running(paused:暂停动画、running:运行动画)

animation-fill-mode:动画执行过程效果是否可见　

　　　　　obj.addEventListener("animationstart",fn);//其他兼容浏览器

　　　　　obj.addEventListener("webkitAnimationIteration",fn);

　　　　　obj.addEventListener("animationIteration",fn);

　　　　　obj.addEventListener("webkitAnimationEnd",fn);

　　　　　obj.addEventListener("animationEnd",fn);