CSS相关动画

1.CSS鼠标放上去抖动

示例链接

shake.gif

html:

      <p class="shake shake-rotate">shake-rotate</p>

css:

      p {
        font-family: helvetica;
        font-weight: bold;
        font-size: 80px;
        color: red;
      }
      .shake {
        display: inline-block;
        transform-origin: center center;
      }
      .shake.shake-rotate:hover {
        -webkit-animation-name: shake-rotate;
        -ms-animation-name: shake-rotate;
        animation-name: shake-rotate;
        -webkit-animation-duration: 100ms;
        -ms-animation-duration: 100ms;
        animation-duration: 100ms;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
      }

      @keyframes shake-rotate {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        50% {
          -webkit-transform: translate(0px, 0px) rotate(5deg);
        }
        100% {
          -webkit-transform: translate(0px, 0px) rotate(10deg);
        }
      }

注意：transform 属性之 transform-origin:

定义

transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。

语法

transform-origin: x-axis y-axis z-axis

详情参考链接

2. 水波动画

zoom.gif

html:

    <div class="hidemsgAfter">
        <div class="hidemsg">
            <p>放大效果</p>
            <div> </div>
        </div>
    </div>

css:

.hidemsg {
    width: 270px;
    height: 40px;
    line-height: 28px;
    background: #ff5656;
    text-align: center;
    /* display: none; */
    border-radius: 5px;
    overflow: hidden;
}

.hidemsg div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
    background-color: #ffffff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    width: 204px;
    height: 204px;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
    -moz-animation: ball-scale 1s 0s ease-in-out infinite;
    -ms-animation: ball-scale 1s 0s ease-in-out infinite;
    -o-animation: ball-scale 1s 0s ease-in-out infinite;
    animation: ball-scale 1s 0s ease-in-out infinite;
}

@-webkit-keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.hidemsg p {
    margin: 0;
    line-height: 40px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.hidemsgAfter {
    width: 293px;
    position: relative;
    left: 10px;
    top: 10px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}

.hidemsgAfter :after {
    content: '';
    position: absolute;
    top: 11px;
    right: 15px;
    display: block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ff5656;
}

动画中图片放大是使用transform:scale()方法：

img {
    transform:scale(1.5);
}