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:;

            -webkit-transform: translateY(0);

            transform: translateY(0);

          }

        }

        @keyframes  cd-reveal-down{

          0% {

            opacity: 0.5;

            -webkit-transform: translateY(-100%);

            transform: translateY(-100%);

          }

          100% {

           opacity:;

            -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>

巴特西

css3动画效果：2 简易动画

最新文章

热门文章