CSS 动画

[xszi]

基本语法 & 常用属性

/*
duration | time-function | delay | iteration-count | direction | fill-mode | play-state | name
*/
name {
    animation: 3s ease-in 1s 2 reverse both paused someFrames;

    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: 2;
    animation-direction: reverse;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-name: someFrames;

    @keyframes someFrames {
        from{
            /* some css*/
        }
        to{
            /* some css */
        }
    }
}

构成一个动画需要的最基本属性

@keyframes
animation-name
animation-duration 

一个简单动画栗子

<div class="circle"></div>

.circle {
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;

    animation-name: leftToRight;
    animation-duration: 3s;
}

@keyframes leftToRight {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 500px
    }
}