CSS3动画效果

基础

/*css文件*/
.loader--spinningDisc {
    border: solid 0.5em #9b59b6;
    border-right-color: transparent; /*右边框透明*/
    border-left-color: transparent;
    padding: 0.5em;
    width: 2em;
    height: 2em;
    border-radius: 50%;  /* 做圆角，content和padding也会变圆角*/
    background: #3498db;
    background-clip: content-box; /*背景不包括border和padding,border-box;padding-box*/
    animation: spinDisc 1.5s linear infinite; /*执行spinDisc动画，1.5秒每次，无限循环*/
}
@keyframes spinDisc {
  50% {
    border-top-color: #3498db;
    border-bottom-color: #3498db;
    background-color: #2ecc71;
  }
  100% {
    transform: rotate(1turn);  /* 旋转一圈 */
    /*90deg = 100grad=0.25turn ≈ 1.57079rad*/
  }
}

<!-- HTML 代码 -->
<div class="loader loader--spinningDisc"></div>

transiton使用

.box{
  transiton: width 2s, height 2s,background-color 2s, transform 2s;
}