1.CSS动画
1.1 CSS动画属性-animation
animation：为CSS动画属性，使用该属性可以替代flash等动画效果，使其可以完成关键帧补充等效果。其需要和@keyframes配合使用，以满足动画效果。其余内容可参见：W3C-CSS动画讲解
CSS动画示例代码一
<!-- 示例代码二 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D Learn</title>
</head>
<body>
<div class="div1" onclick="paused()">
css3 动画
</div>
<style>
body {
width: 99%;
height: 100%;
}
.div1 {
margin-top: 25%;
border-radius: 7px;
width: 80px;
height: 50px;
/* 使div文字居中的方法之一 */
line-height: 50px;
text-align: center;
/* 若想使div移动，则需要设置定位为相对位置 */
position: relative;
/* 简写方式 */
/* animation: test 15s infinite running;
-webkit-animation: test 15s infinite running; */
animation-name: test;
-webkit-animation-name: test;
/* duration 后面需要加单位s */
-webkit-animation-duration: 15s;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
-webkit-animation-play-state: paused;
background-color: aqua;
}
@keyframes test {
0% {
left: 0px;
}
15% {
margin-top: 0px;
left: 300px;
/* transform: rotate(30deg); */
}
50% {
margin-top: 25%;
left: calc(100% - 85px);
/* transform: rotate(30deg); */
background-color: greenyellow;
}
65% {
margin-top: 50%;
left: calc(100% - 370px);
/* transform: rotate(360deg); */
background-color: bisque;
}
100% {
margin-top: 25%;
left: 0px;
}
}
</style>
<script>
function paused() {
document.getElementsByClassName("div1")[0].style.animationPlayState = "running";
}
</script>
</body>
</html>
网友评论