CSS3 实现动画功能

最新推荐文章于 2024-07-09 12:16:47 发布

zxz32384

最新推荐文章于 2024-07-09 12:16:47 发布

阅读量396

点赞数

分类专栏： CSS3 文章标签： css3 动画

本文链接：https://blog.csdn.net/u013993319/article/details/52634192

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、transition功能：
通过将元素的某个属性在指定的时间内通过平滑过渡到另外属性值来实现动画功能。
transition：property duration timing-function
其中property表示对某个属性进行平滑移动，duration表示在多长时间内完成属性的平滑过渡，timing-function表示通过什么方法过渡。
实现div元素的大小从100*100 逐渐变到600*600；
div{
width:100px;
height:100px;
transition:width 1s linear, height 1s linear;
-webkit-transition：width 1s linear, height 1s linear;
-moz-transition:width 1s linear, height 1s linear;
-o-transition:width 1s linear, height 1s linear;
-ms-transition:width 1s linear, height 1s linear;
}
div:hover{
width:600px;
height:600px;}

2、animations功能：
与transition的区别是：使用transition只能通过指定属性的开始值与结束值，然后在这两个属性间进行平滑过渡的方式来实现动画效果。而animations则是通过定义多个关键帧以及定义每个关键帧中的元素的属性值来实现更为复杂的动画。
实现div元素的位置从（0，0）逐渐移动到（400，400）；
@keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-webkit-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-moz-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-ms-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-o-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
div
{
animation: myfirst 5s linear 2s 1;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s 1;
-moz-animation: myfirst 5s linear 2s 1;
-o-animation: myfirst 5s linear 2s 1;
-ms-animation: myfirst 5s linear 2s 1;
}
注意：动画结束后，元素的状态会回到初始状态。
那么如何让动画结束后还停留在最后一帧呢？
第一种方法：
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。
setTimeout(function(){ },time);


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" > 
<title>webkitAnimationEnd</title> 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="format-detection" content="telephone=no"/> 
<style type="text/css"> 
#div{ 
width:200px; 
height:200px; 
position: absolute;
background:#f60; 
} 
 @keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
    @-webkit-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }  }
     @-moz-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
    @-ms-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
    @-o-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
.change
{
    animation: myfirst 5s linear 1;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 1;
-moz-animation: myfirst 5s linear 1;
-o-animation: myfirst 5s linear  1;
-ms-animation: myfirst 5s linear 1;
}
.last{
    top:400px;
    left: 400px;
}

</style> 
</head> 
<body> 
<div id="div" class="change"></div> 
<script type="text/javascript"> 
var tt = document.getElementById('div'); 

 setTimeout(function(){
 //在动画结束的时候给div替换last类
tt.className=tt.className.replace("change","last");
alert("animation done!!");
</script> 
</body> 
</html>

第二种方法：
当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" > 
<title>webkitAnimationEnd</title> 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="format-detection" content="telephone=no"/> 
<style type="text/css"> 
#div{ 
width:200px; 
height:200px; 
position: absolute;
background:#f60; 
} 
 @keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
    @-webkit-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }  }
     @-moz-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
    @-ms-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
    @-o-keyframes myfirst{
     from {transform: translate(0,0); }
     to {transform: translate(400px, 400px); }}
.change
{
 animation: myfirst 5s linear  1;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear  1;
-moz-animation: myfirst 5s linear  1;
-o-animation: myfirst 5s linear  1;
-ms-animation: myfirst 5s linear 1;
}
.last{
    top:400px;
    left: 400px;
}

</style> 
</head> 
<body> 
<div id="div"></div> 
<script type="text/javascript"> 
var tt = document.getElementById('div'); 
tt.addEventListener("click", function(){ 
this.className = 'change'; 
}, false); 
tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
this.className = this.className.replace('change', 'last'); 
console.log(2); 
}, false); 
</script> 
</body> 
</html>

ps:-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration

zxz32384

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 实现动画功能

1、transition功能：通过将元素的某个属性在指定的时间内通过平滑过渡到另外属性值来实现动画功能。 transition：property duration timing-function 其中property表示对某个属性进行平滑移动，duration表示在多长时间内完成属性的平滑过渡，timing-function表示通过什么方法过渡。 2、animations功能：与tr
复制链接

扫一扫