CSS Animation制作炫酷动画效果的技巧与实战

一、关于CSS Animation

CSS动画，即是把CSS应用到HTML元素上，实现从一个状态到另一个状态，使元素产生动态效果。CSS动画可以通过CSS中“animation”属性来实现，它可以控制动画的持续时间、速度曲线、变化数量、方向等。CSS动画优点在于它完全包含在浏览器窗口内，不依赖其他技术，具有兼容性优势。

下面我们通过一些具体的实例来展示CSS Animation的使用技巧与实战：

二、使用CSS Animation实现图标动画

在网页的设计中，常常用到图标来代表某些功能或服务。使用CSS Animation可以为这些图标增加交互性和视觉效果。

    .icon {
        width:100px;
        height:100px;
        background-color:#fff;
        border-radius:50%;
        position:relative;
        margin:50px;
      }

    .icon:before,
    .icon:after {
        content:"";
        display:block;
        position:absolute;
        top:12%;
        left:12%;
        transform:rotate(45deg);
        width:75%;
        height:75%;
        border-top:1px solid #000;
      }

    .icon:after {
        transform:rotate(-45deg);
      }

    .icon:hover:before {
        animation:rotate_icon 1s linear both;
      }

    @keyframes rotate_icon {
      0% {
        transform:rotate(45deg);
      }
      25% {
        transform:rotate(90deg);
      }
      50% {
        transform:rotate(135deg);
        box-shadow:-3px 3px 0 rgba(0,0,0,0.3);
      }
      75% {
        transform:rotate(180deg);
        box-shadow:-6px 6px 0 rgba(0,0,0,0.3);
      }
      100% {
        transform:rotate(225deg);
      }
    }

代码解析：该代码的HTML元素类是“.icon”，并且在:hover样式设置了“rotate_icon”动画。当鼠标指针悬停在“.icon”元素上时，图片会按照旋转的路径逐帧播放，在最后的一个时刻回到最初的位置，从而制造出独特的动画效果。通过这种方式，设计人员可以用纯CSS来定义自己的交互设计元素。

三、使用CSS Animation实现按钮的水波纹效果

按钮的水波纹效果可为网页的UI设计增添动态和活力。CSS Animation技术可以帮助设计人员简单的实现这种效果，并且使其在任何浏览器上都能正常工作。

  .button {
      width:150px;
      height:50px;
      background-color:#59B3DA;
      border:none;
      border-radius:5px;
      color:#fff;
      font-weight:bold;
      text-transform:uppercase;
      letter-spacing:1px;
      position:relative;
      overflow:hidden;
      margin:50px;
    }

  .button::after {
      content:"";
      display:block;
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      pointer-events:none;
      background:rgba(255,255,255,0.5);
      animation:animate-wave 1s;
    }

  @keyframes animate-wave {
      0% {
        transform:scale(0);
        opacity:1;
      }
      100% {
        transform:scale(2);
        opacity:0;
      }
    }

代码解析：该代码的HTML元素类是“.button”，并且在:after设置了“animate-wave”动画。在按钮被点击时，页面上会出现一个放大并逐渐消失的水波纹效果，用CSS Animation的优点在于它不会像许多相似的库那样增加页面代码及脚本执行的时间。滑动手势也能够启动这个效果，只需要使用JavaScript在触摸事件上绑定内容即可。

四、使用CSS Animation实现眨眼效果

在一些网页或手机APP的互动设计中，常常会用到眨眼动画来增强人物图像的表现力，让个性化的动画形象更能引起用户的注意。CSS Animation技术可以简单的实现这种效果。

    .eye {
        width:80px;
        height:80px;
        border-radius:50%;
        background-color:#ddd;
        position:relative;
        margin:50px;
        overflow:hidden;
      }

    .eye::before {
        content:"";
        display:block;
        width:40%;
        height:100%;
        background-color:#000;
        border-radius:50%;
        position:absolute;
        top:0;
        left:45%;
        animation:lids 4s infinite ease-in-out;
      }

    .eye::after {
        content:"";
        display:block;
        width:15%;
        height:15%;
        background-color:#fff;
        border-radius:50%;
        position:absolute;
        top:30%;
        left:45%;
        animation:pupil 4s infinite ease-in-out;
      }

    @keyframes lids {
      0%, 100% {
        top:0;
        transform:rotate(0deg)
      }

      25%, 75% {
        top:50%;
        transform:rotate(180deg)
      }
    }

    @keyframes pupil {
      0%, 100% {
        top:30%;
        left:45%;
      }
      25% {
        top:15%;
        left:18%;
      }
      75% {
        top:15%;
        left:72%;
      }
    }

代码解析：该代码的HTML元素类是“.eye”，并且在:before及:after设置了“lids”及“pupil”动画。当动画被设置后，眼睛的蓝色和白色部分就会开始随机眨眼，或者视线向左或向右移动，不断地变化。这种UI交互效果使得页面页面不仅有丰富的元素，同时也更有活力和动态效果。

五、使用CSS Animation实现3D旋转效果

CSS3有一个非常强大的特性——3D旋转。它可以通过CSS的“transform”属性结合“perspective”属性实现一个在三维空间内的动画效果，让旋转的图像更具真实、立体感。通过 CSS Animation，我们可以非常便捷地来实现这种动画效果。

    .rotating-box {
        width:200px;
        height:200px;
        position:relative;
        margin:50px;
        transform-style:preserve-3d;
        animation:rotate 4s infinite linear;
      }

    .front, .back {
        width:200px;
        height:200px;
        position:absolute;
        left:0;
        top:0;
        border:1px solid #000;
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:25px;
        color:#FFF;
      }

    .front {
        background-color:rgb(125, 194, 211);
        transform:rotateY(0deg);
      }

    .back {
        background-color:rgb(199, 153, 153);
        transform:rotateY(180deg);
      }

    @keyframes rotate {
      from {
        transform:rotateY(0deg);
      }
      to {
        transform:rotateY(360deg);
      }
    }

代码解析：该代码的HTML元素类是“.rotating-box”，并且在该元素上设置了“rotate”动画、以及子元素.front及.back。该代码展示了一个会 360 度旋转的盒子。盒子里面有两面不同的面板，分别被命名为“.front”和“.back”，他们转动的轴心被设置在CSS3的原点上。当盒子内部的元素被旋转时，盒子本身的轮廓线仍然是竖直的，这使它看起来是立体的。通过修改程序的数值，我们可以改变盒子的大小和视角。

六、使用CSS Animation实现任意曲线路线动画

CSS Animation能够在任意曲线路线上产生动画，这可以实现非常专业的绘图和图标设计。下面这个例子展示一个基于CSS Animation的路径动画：

    .path {
        width:200px;
        height:200px;
        margin:50px auto;
        position:relative;
      }

    .dot {
        width:20px;
        height:20px;
        border-radius:50%;
        background-color:rgb(150, 121, 121);
        position:absolute;
        top:40px;
        left:0;
        animation-path:path 3s infinite;
      }

    @keyframes path {
      50% {
        transform:translateX(250px) translateY(150px) rotate(180deg);
      }
      100% {
        transform:translateX(500px) translateY(0px) rotate(360deg);
      }
    }

代码解析：该代码的HTML元素类是“.path”及“.dot”，并且在“.dot”元素上设置了“path”动画。它会沿着设置的曲线来移动。假如设置一个渐变效果或其他过渡效果，这种动画效果就能够达到更高的视觉效果。

七、结语

在本文中，我们介绍了几个使用CSS Animation制作炫酷动画效果的技巧与实战。CSS动画可以被用来优化网站的效果和性能，同时还使你能够打造出令人难忘的交互设计。当然，你可以根据自己的需要和创造性进行设计和创作，会有无限可能性等待着你去探索！