CSS3动画 Transitions, Transforms和Animation使用简介

最新推荐文章于 2020-01-07 10:26:01 发布

原创最新推荐文章于 2020-01-07 10:26:01 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

css 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了CSS中过渡（transition）和动画（animation）的基本概念及应用实例，包括过渡属性如持续时间、延迟时间和过渡类型等，以及动画的逐帧播放控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Transitions

transition有下面些具体属性：

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

    　<a href="/" class="trans">经过我~~</a>
    　.trans {
        -webkit-transition-property: background-color;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease;
        }
    .trans:hover {
        background-color: #486AAA;
        color: #fff;
    }

transform

transform主要包括，拉伸，压缩，旋转，偏移。

<a href="/" class="trans_effect">hover</a>

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
    }
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

Animation

animations可以控制与各个时间段逐帧播放

<div class="anim_box test_box"></div>
@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}