您的位置：首页 > Web前端 > CSS

CSS3动画入门 CSS动画如何使用（举例说明）

2017-03-27 13:18 806 查看

本文直接通过代码演示及注释初步了解一下CSS3动画的使用。

演示效果可以直接拷贝代码运行一下即可~

另外推荐几个不错的动画网站：

Animate.css

Animista

动画工具

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航