css的动画效果技巧

一 css属性：transition/transform

<div class="wrap">
    <div class="img"></div>
</div>

这是html，css为了优雅的实现动画效果如下所示：

  .wrap {
            width: 200px;
            height:200px;
            background-color: #4cae4c;
            margin: 20px auto;
            overflow: hidden;
        }
        .img {
            width: 100px;
            height: 100px;
            display: block;
            border-radius: 50px;
            background-color: #8a6d3b;
            opacity: 0;
            z-index:10;
            transform: translate(-100px,-100px);
            transition: transform 1s ease-in-out,opacity 1s ease-in-out 0.5s;
        }
        .wrap:hover .img {
            transform: translate(0px,0px);
            opacity: 1;
            transition: transform 1s ease-in-out,opacity 1s ease-in-out 0.5s;
        }

二 动画属性：animation

已实现吐泡效果为例，html较为简单，

<div class="spinner"></div>

最关键是的动画的命名及引用，如下所示：

 .spinner {
            width: 100px;
            height: 100px;
            background-color: #4cae4c;
            border-radius: 50px;
            margin: 50px auto;
            animation: spinner 1s infinite ease-in;
        }
        @keyframes spinner {
            from {transform: scale(0,0)}
            to{transform: scale(1,1);opacity: 0}
        }

如此就可实现不停吐泡的效果。

推荐使用动画库，csshake，引入后使用class就可以使用很多效果。

三 通过animation-delay来定义动画何时开始，

1. 默认的为立即执行，
2. 正值是延迟动画执行，
3. 负值是立即执行，但是跳过指定时间后直接进入动画

实现电台的播放图标，html如下：

<div class="spinner">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
    </div>

css则可以使用动画，

.spinner {
            width: 52px;
            height: 50px;
            margin: 100px auto;
            text-align: center;
        }
        .spinner >div {
            display: inline-block;
            width: 6px;
            height:100%;
            background-color: green;
            animation: spinner 1.2s infinite  ease-in-out;
        }
        .spinner .line2{
            animation-delay: -1.1s;
        }
        .spinner .line3{
            animation-delay: -1s;
        }
        .spinner .line4{
            animation-delay: -0.9s;
        }
        .spinner .line5{
            animation-delay: -0.8s;
        }
        @keyframes spinner {
            0%,40%,100%{
                transform: scaleY(.4);
            }20%{
                transform: scaleY(1);
         }
        }

实现的效果如下图所示：

四 实现正圆运动

 

实现正圆运动的关键点：

.ball {
  transform-origin:250% center;
  animation:circle 1s infinite linear;
}
@keyframes circle {
  to {transform:rotate(1turn)
}

实现椭圆运动是圆的运动和Y轴的移动，关键点为下面：

子元素实现正圆运动，且给父元素添加上下位移，类似正圆运动。