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