CSS3 Animation(七)

transform ：旋转（rotate） 、扭曲（skew） 、缩放（scale）、移动（translate）

transition 平滑移动

 

animation  动画 与 keyframes帧搭配使用

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

@keyframes mymove
{from {left:0px;}to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

 

----------------------

渐变 linear-gradient

   从左导

background: linear-gradient(to right,rgba(255,255,255,0),#666 40%,rgba(255,255,255,0) );

 

描述一个demo 灯笼左右摆动

.words {
  -webkit-animation: light 3s linear infinite;
  animation: light 3s linear infinite; /*持续3S*/
  transform-origin: top center;
}

@keyframes light {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

描述一个金蛋左右摇晃 有快到慢

.egg{
  animation: shake 1s linear infinite; /*持续3S*/
}
@keyframes shake {
  0%, 10%, 20%, 80%, 90%, 100% {
     -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-5px,0,0);
  }
  40%, 60% {
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(5px,0,0);
  }
}

描述一个文字说明有序列

ul,li,ol{
  list-style: none;
}
li{
  position: relative;
  padding-left: 20px;;
}
.num{
  position: absolute;
  left: 0;
  top: 0;
}

<ul>
  <li><span class="wa">1.</span>活动对象：妙资金融全部用户;</li>
  <li><span class="wa">2.</span>活动时间：2016年12月26日00:00—12月31日24:00；</li>
</ul>

参考下： https://www.mzmoney.com/specialtopics/newyear/wx-newyear.html?uid=12016082923762&sessionId=a93d83fe11a84979b92f054ae9eee12f