找回密码
当前位置：前端开发者 > CSS > 正文

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

2018-09-14 22:46:38 分类：CSS 阅读(152) 评论(0)

安卓前端开发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
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论