close

Css之animation详细解释

首先用@keyframes在style.css里面创建animation的名称,如

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    80% {
        transform: translateX(10px);

    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

然后在需要添加animation的class里面添加进去,

.heading-primary-main {
    font-family: 'Jua', sans-serif;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
    animation-name: moveInLeft;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-iteration-count: infinite; //或者时间,比方说3s 
    animation-timing-function: ease-in-out;
}

animation-duration是时间长度,delay是延迟几秒发送,iteration-count是动画的次数,timing-function是动画的形式,有ease,ease-in,ease-in-out,linear,step-start,step-end 等几种方式,还有cubic-bezier 形式,是最通用的形式,跟transition的动画效果一样。

简写形式是:

animation: 4s linear 0s infinite alternate move_eye; 
animation: name duration timing-function delay iteration-count direction;
animation-direction:alternate;可以创建轮流方向的动画。 
animation可以在hover的时候用,
.logo:hover { animation:name duration timing-function delay iteration-count direction }
Share :