css-过度动画
2018-11-27 本文已影响0人
邵毅超
css的帧动画，说白了就是和flash动画差不多，比如一个正方形过度成为一个圆形，并且是逐渐形成。
keyframes：关键帧。
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
在box到达50%和100%位置时改变颜色
注：如果时长没有规定，不会有过渡效果，因为默认值是 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>帧动画</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0;
animation: moving 1s ease;
text-align: center;
color: gold;
}
div{
font-weight: bold;
}
@keyframes moving{
0%{
transform: translateY(0px);
background-color: yellow;
}
50%{
transform: translateY(400px);
background-color: red;
}
100%{
transform: translateY(0px);
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="box">哈哈哈</div>
</body>
</html>
