CSS动画教程:animation和transition动画

103 阅读 0 评论 68 点赞

我是靠谱客的博主满意曲奇，最近开发中收集的这篇文章主要介绍CSS动画教程:animation和transition动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

[1] animation出现的问题

**学过CSS的应该对,animation怎么用应该很熟悉了。但是animation有个问题。

比如下面这个图;**

@keyframes toRight{
    0%{
        filter:none;
        width: 100%;
        height: 100%;
    }
    100%{
        filter:invert();
        width: 200%;
        height: 200%;
    }
    }

animation添加到hover

我们可以发现当animation添加到hover后移除事件他会直接结束，造成一种严重的突变感，以至于整个动画都很次。

[2] 解决方法:transition？

*但是我们有解决办法啊，可以在原样式加过渡啊？
请看下面这张图

 .context{
        position: absolute;
        top:50%;
        left:50%;
        transform: translateX(-50%) translateY(-50%);
        width: 25vw;
        height: 25vh;
        border: 1px solid black;
        border-radius: 20px;
        filter:none;
        transition: all 1s ease;  /* 加的 */
    }

原样式加了transition
咦，好像不管用，其他过渡效果都有了就是没有这个动画的过渡。

[3] 只用transition

我们可以试试这个方法，请看图 transition动画

我们直接用transition控制宽高以达到过渡的效果。

[4] 加点弹性表达式

动画有点没有动感，我们加点弹性表达式。

  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);

在这里插入图片描述
再加一下阴影，调整一下大小。
再加一个，再写点字

[5] 加点阴影体现层次感和玻璃质感

感觉还是有点问题,加点filter的阴影给一下玻璃的感觉

    .context{
        display: flex;
        justify-content: center;
        align-items: center; 
       margin: 0.5rem;
        width: 5vw;
        height: 5vh;
        border: 1px solid black;
        border-radius: 20px;
        filter:none;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);  /* 加的 */
        box-shadow: 1px 1px 5px black;
      
      
    }
    .context:hover{
        filter:drop-shadow(10px 10px 5px white)invert();
        width: 50%;
        height: 50%;
        color:white;
        border-color: white;
        box-shadow: 5px 5px 15px white;
        /* animation: toRight 1s ease; */
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);
        transform: rotate3d(100,100,100,360deg);
        font-size:xx-large;
    }

在这里插入图片描述

[6] animation用在页面进场

上面得知，animation不能用在hover。
但是我们可以用在别的地方。在这里插入图片描述
我们每次刷新进入页面都会触发这个弹性旋转，这使得我们的页面有个进场效果，
可以根据页面的关系，来选择旋转方向(进入的页面向左退出页面向右等等)

在这里插入图片描述

这个动画也可以自行设置。

[end] 总结

animation不要用在hover，用的时候要保证这段时间不希望这个动画进行改变，如要进行逆向播放，则需要另行设置比较麻烦。
transition用在hover很好,记得加上缓动等弹性表达式。要注意阴影的把握可以体现深度，还有质感，光线等等。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="context">
            S
        </div>
        <div class="context">
            B
        </div>
    </div>
</body>

<style>
    html{
        overflow: hidden;
        font-size: x-large;
    }
    body{
        animation: rotate 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        margin:0;
        width:100vw;
        height: 100vh;
        background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
    }
    .container{
        position: relative; 
        width: inherit;
        height: inherit;
        display: flex;
        justify-content: center;
        align-items: center; 
        
    }
    .context{
        display: flex;
        justify-content: center;
        align-items: center; 
       margin: 0.5rem;
        width: 5vw;
        height: 5vh;
        border: 1px solid black;
        border-radius: 20px;
        filter:none;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);  /* 加的 */
        box-shadow: 1px 1px 5px black;
      
      
    }
    .context:hover{
        filter:drop-shadow(10px 10px 5px white)invert();
        width: 50%;
        height: 50%;
        color:white;
        border-color: white;
        box-shadow: 5px 5px 15px white;
        /* animation: toRight 1s ease; */
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);
        transform: rotate3d(100,100,100,360deg);
        font-size:xx-large;
    }

    @keyframes rotate{
    0%{
       transform: rotate3d(0,0,100,360deg)
      
    }
    100%{
        transform: rotate3d(0,0,0,0deg)
    }
    }
</style>
</html>