CSS3动画入门 CSS动画如何使用(举例说明)
本文直接通过代码演示及注释初步了解一下CSS3动画的使用。
演示效果可以直接拷贝代码运行一下即可~
另外推荐几个不错的动画网站:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画演示</title>
<style type="text/css">
.test {
width: 200px;
height: 28px;
background-color: #00b166;
}
/* @keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
下面是一个从 20%(相对于动画时长的百分比) 到 100% 的动画
from = 0%
to = 100%
*/
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
/* 给某一个类添加动画
需要给它配置animation属性
语法:
animation: name duration timing-function delay iteration-count direction;
name:规定 @keyframes 动画的名称。
duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。
timing-function:规定动画的速度曲线。默认是 "ease"。
delay:规定动画何时开始。默认是 0。
iteration-count:规定动画被播放的次数。默认是 1。
direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。(alternate下一次反向播放,前提是播放次数大于1)
*/
.bounceOutLeft {
width: 200px;
height: 28px;
background-color: red;
-webkit-animation: bounceOutLeft 1s;
animation: bounceOutLeft 0.6s ease-in;
}
</style>
<script type="text/javascript">
changeClass = function () {
// 设置一个计时器用于实现动画结束后隐藏该元素。
// setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(function () {
document.getElementById("test").style.display = "none";
}, 600);
// 点击之后给元素添加动画的两种方式:
// 1、通过替换class 这个方法有点傻逼 需要把原class的样式重新写一遍 只为了添加一个 animation属性;
// 2、直接在原class 上添加 animation属性
// document.getElementById("test").className = "bounceOutLeft";
document.getElementById("test").style.animation = "bounceOutLeft 0.6s ease-in";
};
resetClass = function () {
// 重置要做的事情有两个:
// 1、显示元素 display = "";
// 2、取消动画 animation = ""
document.getElementById("test").style.display = "";
// document.getElementById("test").className = "test";
document.getElementById("test").style.animation = "";
};
</script>
</head>
<body>
<div id="test" class="test"></div>
<button id="changeBtn" onclick="changeClass()">change</button>
<button id="changeBtn2" onclick="resetClass()">reset</button>
</body>
</html>