前端开发CSS动画所有知识点

安卓前端开发IDE 安卓端开发是前端还是 安卓前端开发技术

本文是对css的动画应用的简单讨论,这里的重点是复合运动。
我们知道css的动画主要有两种方式过渡(transition)和动画(animation)来实现。
比如我想鼠标移入时,旋转一圈,可以这么做:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        transition: transform 2s linear;
    }
    div:hover {
        transform: rotate(360deg);
    }
</style>

复合运动,既旋转又平移呢?这个很好做,transform首先是支持复合变换的:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        transition: transform 2s linear;
    }
    div:hover {
        transform: rotate(360deg) translateX(400px);
    }
</style>

但是实现的效果跟我们想象不一样。上面效果走的是螺旋线,这是因为transform变换是有顺序的。上面的写法是先平移,再旋转,因此旋转的中心一直再变。我们可以交换一下顺序:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        transition: transform 2s linear;
    }
    div:hover {
        transform: translateX(400px) rotate(360deg);
    }
</style>

之前的效果是旋转和平移的时间都是两秒。我希望平移的时间是1s,那么只用transform应该是做不到的。我们可以使用transition的复合运动:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        position: relative;
        left: 0;
        transition: transform 2s linear, left 1s linear;
    }
    div:hover {
        transform: rotate(360deg);
        left: 400px;
    }
</style>

因为旋转的时间是平移的两倍,因此效果是平移完时,旋转才进行了一半。
如果我希望效果是反过来的,即先旋转1s,然后再边平移边旋转,可以使用延迟:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        position: relative;
        left: 0;
        transition: transform 2s linear, left 1s 1s linear;
    }
    div:hover {
        transform: rotate(360deg);
        left: 400px;
    }
</style>

此时我又希望情况变成这样,不要之前一秒的旋转了,直接从旋转的一半开始,边旋转边平移。
此时要使用负延迟:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        position: relative;
        left: 0;
        transition: transform 2s -1s linear, left 1s linear;
    }
    div:hover {
        transform: rotate(360deg);
        left: 400px;
    }
</style>

transition不是强大的动画,有很多局限性。
第一,不支持无限动画。
第二,触发条件需要属性变化。
而animation比较强大,用“帧”的观点来说,transition只是animation的一帧。
比如说2次旋转:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: rotate 2s linear 2;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
</style>

旋转加平移:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: animate 2s linear infinite;
    }
    @keyframes animate {
        100% {
            transform: translateX(400px) rotate(360deg);
        }
    }
</style>

我希望像过渡一样,移入旋转平移,移出是逆向操作。那么animation能实现反复式旋转吗?
答案是可以的,定义旋转方向为alternate:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: animate 2s linear infinite alternate;
    }
    @keyframes animate {
        100% {
            transform: translateX(400px) rotate(360deg);
        }
    }
</style>

上面的交替效果也可以通过中间帧的方式来实现:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: animate 4s linear infinite;
    }
    @keyframes animate {
        50% {
            transform: translateX(400px) rotate(360deg);
        }
    }
</style>

animation也是有复合效果的,因而可以实现交替动画。
比如,先旋转1s,然后再平移1s,然后再放缩1s:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes translate {
        100% {
            transform: translateX(400px);
        }
    }
    @keyframes scale {
        100% {
            transform: scale(1.5);
        }
    }
</style>

但是效果还是跟我们想象中的不太一样,我们希望平移后直接再那个位置进行放缩。
因此我们要在最后那个动画上做点文章:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes translate {
        100% {
            transform: translateX(400px);
        }
    }
    @keyframes scale {
        0% {
            transform: translateX(400px);
        }
        100% {
            transform: translateX(400px) scale(1.5);
        }
    }
</style>

此效果只用一个动画的关键帧应该也能做到,留作作业。
这里再讨论一个时期,我们希望整个动画停留在最后一帧的最终效果上,那么请使用forwards:
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear forwards;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes translate {
        100% {
            transform: translateX(400px);
        }
    }
    @keyframes scale {
        0% {
            transform: translateX(400px);
        }
        100% {
            transform: translateX(400px) scale(1.5);
        }
    }
</style>

能否运动中,当我hover时,希望暂停:
也可以做到
html 代码

<div>div</div>
<style>
    div {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #00ffff;
        animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear forwards;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes translate {
        100% {
            transform: translateX(400px);
        }
    }
    @keyframes scale {
        0% {
            transform: translateX(400px);
        }
        100% {
            transform: translateX(400px) scale(1.5);
        }
    }
    div:hover {
        animation-play-state: paused;
    }
</style>

本文完。

安卓开发属于前端还是后端 web前端和安卓开发哪个好 安卓与前端开发区别

» 本文来自:前端开发者 » 《前端开发CSS动画所有知识点》
» 本文链接地址:https://www.rokub.com/5711.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!