css3 动画
2015-10-12 14:45
1046 查看
1、过渡 所有的过渡必须明确指定改变数值，height，width等必须是精确地数值或百分比，不能为auto；
只要能明确改变属性数值的事件都可以触发过渡，class，JavaScript，hover等；
[/code]2、动画
[/code]3、变形
[/code]
来自为知笔记(Wiz)
只要能明确改变属性数值的事件都可以触发过渡，class，JavaScript，hover等；
.height-animate {-webkit-transition: -webkit-transform .3s ease-in-out, height .3s ease-in-out;
-moz-transition: -moz-transform .3s ease-in-out, height .3s ease-in-out;
-o-transition: -o-transform .3s ease-in-out, height .3s ease-in-out;
transition: transform .3s ease-in-out, height .3s ease-in-out
}
.all-animate {transition: all .5s;
transition-property: all;
transition-duration: .5s;
transition-timing-function: initial;
transition-delay: initial;
}
[/code]2、动画
@keyframes anm {0% {width: 10px;
height: 10px;
}
50% {width: 200px;
}
100% {width: 200px;
height: 100px;
}
}
.demo {display: inline-block;
background: green;
}
.demo:hover {-webkit-animation-name: anm;
-moz-animation-name: anm;
-o-animation-name: anm;
animation-name: anm;
animation-timing-function: ease-in-out;
animation-duration: 2s;
animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/
}
[/code]3、变形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.demo img {transition: all 0.3s ease-in-out;
}
.demo img:hover {transform: translate(100px) scale(1.5);
}
@keyframes anm {0% {transform: rotate(0deg)
}
50% {transform: rotate(90deg)
}
100% {transform: rotate(180deg)
}
}
.demo2 img:hover {-webkit-animation-name: anm;
-moz-animation-name: anm;
-o-animation-name: anm;
animation-name: anm;
animation-timing-function: ease-in-out;
animation-duration: 2s;
animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/
}
</style>
</head>
<body>
<div class="demo"><img src="img/question_mark.png">aaaaaa</div>
<br>
<div class="demo2"><img src="img/question_mark.png">aaaaaa</div>
</body>
</html>
[/code]
来自为知笔记(Wiz)
附件列表
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐