css3动画效果：2 简易动画

1. transition动画：鼠标移上去旋转放大

关键点-- :hover transform: scale(*) rotate(*deg)

cards

2.关键帧动画：位移动画

translateY(-100%)

.box{
          width: 300px;
          height: 300px;
        }
        .cd-reveal-down{
          border: 1px solid #cdf0f9;
          width: 200px;
          height: 100px;

          -webkit-animation: cd-reveal-down 2s 1;
          animation: cd-reveal-down 2s 1;

        }
        @-webkit-keyframes  cd-reveal-down{
          0% {
            opacity: 0.5;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
          }
          100% {
           opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
        }
        @keyframes  cd-reveal-down{
          0% {
            opacity: 0.5;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
          }
          100% {
           opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
        }

css

html

<div class="box">
       <div class="cd-reveal-down">cd-reveal-down</div>
     </div>

3.关键帧动画：位移动画, 元素向上向下微幅震动 infinitite

.m-arrow{
          
          width: 20px;
          height: 20px;
          border: 1px solid #cdf0f9;
          background: #0f00f0;

          animation: arrowdown 2s ease-in-out infinite;

          -webkit-animation: arrowdown 2s ease-in-out infinite;
        }
        @-webkit-keyframes arrowdown{
          0% {           
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
          50% {
           -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
          }
          100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
        }
        @keyframes arrowdown{
          0% {           
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
          50% {
           -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
          }
          100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
         }

arrowdown--debounce

html

<div class="m-arrow"></div>