自己项目中常用的CSS动画

下面是一些常用的CSS动画示例，（一些是基于stylus写的，图个方便）点击示例链接可在线编辑、查看效果(RunJS)，考虑兼容性，请自行加上浏览器内核前缀，让我们直接进入正题吧：

CSS3呼吸灯效果

呼吸灯效果示例

关键代码：

下面的breath_light_before，breath_light_after是给对应的伪类的呼吸灯class

.breath_light,  .breath_light_before::before, .breath_light_after::after{
    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath;                         /* 动画名称 */
    animation-duration: 3s;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
}

@keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}

CSS3旋转效果

旋转效果示例

关键代码：

.btn-rotate {
	 position: absolute;
   transform-origin: center;
   animation-name: rotate;
   animation-duration: 3s;
   animation-timing-function: linear;
   animation-delay: 0s;
   animation-iteration-count: infinite; // n | infinite
   animation-direction: direction;
   animation-fill-mode: fillmode;  
}


@keyframes rotate {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(720deg);
  }
}

stylus 中的函数模式

//定义旋转方法
transformRotate(origin=center,name=icon-rotate,duration=5s,timfn=linear,delay=0s,count=1,direction=normal,fillmode=forwards){
  transform-origin:origin;
   animation-name: name;
   animation-duration: duration;
   animation-timing-function: timfn;
   animation-delay: delay;
   animation-iteration-count: count; // n | infinite
   animation-direction: direction;
   animation-fill-mode: fillmode;
}
//刷新按钮
.btn-refresh {
    &:hover .dijitIcon{
      transformRotate(center,icon-rotate,3s,linear,0s,infinite);//调用函数并传参
    }
}

@keyframes icon-rotate {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(720deg);
  }
}

CSS3鼠标移入显示线条

鼠标移入看线条哦

关键代码：

.scale-line{
  position: relative;
}

.scale-line::after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.scale-line:hover::after{
  visibility: visible;
  transform: scaleX(1);
}

CSS3鼠标移入镜面效果

鼠标移入看镜面效果哦

关键代码：

.mirror{
  position: relative;
  overflow: hidden;
  &::after{
    content: "";
    height: 250%;
    width: 50px;
    background-color: #fff;
    opacity: 0.1;
    position: absolute;
    pointer-events: none;
    top: -30px;
    left: -75px;
    transform: rotate(35deg);
  }
  &:hover::after{
    left: 120%;
    transition: all 550ms ease-in-out;
  }
}

边框两种效果

边框两种效果

关键代码：

//边框发亮
shine(name=shine_red,boxtype=border-box){
  box-sizing: boxtype;
  animation-name: name;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.shine_red{
  shine(shine_red);
}
.shine_blue{
  shine(shine_blue);
}

@keyframes shine_red {
  from { box-shadow: 0 0 5px #bbb; }
  50% { box-shadow: 0 0 8px red; }
  to { box-shadow: 0 0 5px #bbb; }
}
@keyframes shine_blue {
  from { box-shadow: 0 0 6px #333; }
  50% { box-shadow: 0 0 12px #9abcef; }
  to { box-shadow: 0 0 6px #333; }
}

//边框动画
.border-base{//必需
    transition: all 0.6s ease-in;
}

.border-line {//必需
    position: relative;
    height: 100%;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0px transparent;

    &::before,&::after{
        position: absolute;
        content: '';
        display: block;
        width: 0;
        height: 0;
        box-sizing: border-box;
        border: 1px solid transparent;
    }
    &::before{
        bottom: 0;
        right: 0;
        transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
    }
    &::after{
      top: 0;
      left: 0;
      transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
    }
    &:hover::before,&:hover::after{
        width: 100%;
        height: 100%;
    }
      &:hover::before{
          border-bottom-color: #367dff;
          border-left-color: #367dff;
          transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
      }
      &:hover::after{
        border-top-color: #367dff;
        border-right-color: #367dff;
        transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
      }
}