CSS 之动画（Animation）

一、属性

Properties
属性		Description
简介
animation 复合属性。检索或设置对象所应用的动画特效
animation-name 检索或设置对象所应用的动画名称
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
animation-delay 检索或设置对象动画延迟的时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态
animation-fill-mode 检索或设置对象动画时间之外的状态

animation取值：

[ animation-name ]：检索或设置对象所应用的动画名称

[ animation-duration ]：检索或设置对象动画的持续时间

[ animation-timing-function ]：检索或设置对象动画的过渡类型

[ animation-delay ]：检索或设置对象动画延迟的时间

[ animation-iteration-count ]：检索或设置对象动画的循环次数

[ animation-direction ]：检索或设置对象动画在循环中是否反向运动

[ animation-play-state ]：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            overflow: hidden;
            width: 300px;
            height: 150px;
            margin: -75px 0 0 -150px;
            border: 3px solid #eee;
            background: #e0e0e0;
        }

        span {
            opacity: 0;
            display: block;
            height: 50px;
            font: bold 14px/50px Georgia;
        }

        .a1 {
            -webkit-transform: translate(60px);
            -webkit-animation: animations 2s ease-out;
            -moz-transform: translate(55px);
            -moz-animation: animations 2s ease-out;
            -o-transform: translate(55px);
            -o-animation: animations 2s ease-out;
            -ms-transform: translate(55px);
            -ms-animation: animations 2s ease-out;
            transform: translate(55px);
            animation: animations 2s ease-out;
        }

        @-webkit-keyframes animations {
            0% {
                -webkit-transform: translate(0);
                opacity: 0;
            }
            50% {
                -webkit-transform: translate(30px);
                opacity: 1;
            }
            70% {
                -webkit-transform: translate(35px);
                opacity: 1;
            }
            100% {
                -webkit-transform: translate(60px);
                opacity: 0;
            }
        }

        @-moz-keyframes animations {
            0% {
                -moz-transform: translate(0);
                opacity: 0;
            }
            50% {
                -moz-transform: translate(30px);
                opacity: 1;
            }
            70% {
                -moz-transform: translate(35px);
                opacity: 1;
            }
            100% {
                -moz-transform: translate(60px);
                opacity: 0;
            }
        }

        @-o-keyframes animations {
            0% {
                -o-transform: translate(0);
                opacity: 0;
            }
            50% {
                -o-transform: translate(30px);
                opacity: 1;
            }
            70% {
                -o-transform: translate(35px);
                opacity: 1;
            }
            100% {
                -o-transform: translate(60px);
                opacity: 0;
            }
        }

        @-ms-keyframes animations {
            0% {
                -ms-transform: translate(0);
                opacity: 0;
            }
            50% {
                -ms-transform: translate(30px);
                opacity: 1;
            }
            70% {
                -ms-transform: translate(35px);
                opacity: 1;
            }
            100% {
                -ms-transform: translate(60px);
                opacity: 0;
            }
        }

        @keyframes animations {
            0% {
                transform: translate(0);
                opacity: 0;
            }
            50% {
                transform: translate(30px);
                opacity: 1;
            }
            70% {
                transform: translate(35px);
                opacity: 1;
            }
            100% {
                transform: translate(60px);
                opacity: 0;
            }
        }

        .a3 {
            -webkit-transform: translate(100px);
            -webkit-animation: animations3 2s ease-out 2s;
            -moz-transform: translate(100px);
            -moz-animation: animations3 2s ease-out 2s;
            -o-transform: translate(100px);
            -o-animation: animations3 2s ease-out 2s;
            -ms-transform: translate(100px);
            -ms-animation: animations3 2s ease-out 2s;
            transform: translate(100px);
            animation: animations3 2s ease-out 2s;
        }

        @-webkit-keyframes animations3 {
            0% {
                -webkit-transform: translate(160px);
                opacity: 0;
            }
            50% {
                -webkit-transform: translate(130px);
                opacity: 1;
            }
            70% {
                -webkit-transform: translate(125px);
                opacity: 1;
            }
            100% {
                -webkit-transform: translate(100px);
                opacity: 0;
            }
        }

        @-moz-keyframes animations3 {
            0% {
                -moz-transform: translate(160px);
                opacity: 0;
            }
            50% {
                -moz-transform: translate(130px);
                opacity: 1;
            }
            70% {
                -moz-transform: translate(125px);
                opacity: 1;
            }
            100% {
                -moz-transform: translate(100px);
                opacity: 0;
            }
        }

        @-o-keyframes animations3 {
            0% {
                -o-transform: translate(160px);
                opacity: 0;
            }
            50% {
                -o-transform: translate(130px);
                opacity: 1;
            }
            70% {
                -o-transform: translate(125px);
                opacity: 1;
            }
            100% {
                -o-transform: translate(100px);
                opacity: 0;
            }
        }

        @-ms-keyframes animations3 {
            0% {
                -ms-transform: translate(160px);
                opacity: 0;
            }
            50% {
                -ms-transform: translate(130px);
                opacity: 1;
            }
            70% {
                -ms-transform: translate(125px);
                opacity: 1;
            }
            100% {
                -ms-transform: translate(100px);
                opacity: 0;
            }
        }

        @keyframes animations3 {
            0% {
                transform: translate(160px);
                opacity: 0;
            }
            50% {
                transform: translate(130px);
                opacity: 1;
            }
            70% {
                transform: translate(125px);
                opacity: 1;
            }
            100% {
                transform: translate(100px);
                opacity: 0;
            }
        }

        .a2 {
            text-align: center;
            font-size: 26px;
            -webkit-animation: animations2 5s ease-in-out 4s;
            -moz-animation: animations2 5s ease-in-out 4s;
            -o-animation: animations2 5s ease-in-out 4s;
            -ms-animation: animations2 5s ease-in-out 4s;
            animation: animations2 5s ease-in-out 4s;
        }

        @-webkit-keyframes animations2 {
            0% {
                opacity: 0;
            }
            40% {
                opacity: .8;
            }
            45% {
                opacity: .3;
            }
            50% {
                opacity: .8;
            }
            55% {
                opacity: .3;
            }
            60% {
                opacity: .8;
            }
            100% {
                opacity: 0;
            }
        }

        @-moz-keyframes animations2 {
            0% {
                opacity: 0;
            }
            40% {
                opacity: .8;
            }
            45% {
                opacity: .3;
            }
            50% {
                opacity: .8;
            }
            55% {
                opacity: .3;
            }
            60% {
                opacity: .8;
            }
            100% {
                opacity: 0;
            }
        }

        @-o-keyframes animations2 {
            0% {
                opacity: 0;
            }
            40% {
                opacity: .8;
            }
            45% {
                opacity: .3;
            }
            50% {
                opacity: .8;
            }
            55% {
                opacity: .3;
            }
            60% {
                opacity: .8;
            }
            100% {
                opacity: 0;
            }
        }

        @-ms-keyframes animations2 {
            0% {
                opacity: 0;
            }
            40% {
                opacity: .8;
            }
            45% {
                opacity: .3;
            }
            50% {
                opacity: .8;
            }
            55% {
                opacity: .3;
            }
            60% {
                opacity: .8;
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes animations2 {
            0% {
                opacity: 0;
            }
            40% {
                opacity: .8;
            }
            45% {
                opacity: .3;
            }
            50% {
                opacity: .8;
            }
            55% {
                opacity: .3;
            }
            60% {
                opacity: .8;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div>
    <span class="a1">CSS3 Animations</span>
    <span class="a2">CSS3 Animations</span>
    <span class="a3">CSS3 Animations</span>
</div>
</body>

</html>

posted @ 2019-12-14 09:11  样子2018  阅读(328)  评论(0)    收藏  举报