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

最新推荐文章于 2024-07-29 14:14:21 发布

前端开发黑子

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量1.3k

点赞数

分类专栏： CSS / Less 文章标签： css3 动画

本文链接：https://blog.csdn.net/fifteen718/article/details/66970549

版权

CSS / Less 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

本文直接通过代码演示及注释初步了解一下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" οnclick="changeClass()">change</button>
<button id="changeBtn2" οnclick="resetClass()">reset</button>
</body>
</html>