CSS基础动画

1、淡入淡出

使用的是angular的库，可动态改变CSS来实现动态效果。动画是通过_quadraticOut函数计算的
private _quadraticOut (k) {
  return k * (2 - k);
}

<div [ngClass]="{'d3chart-map-topRight-fadesoutOpen': videoFade,
      'd3chart-map-topRight-fadesoutClose': !videoFade}"
      </div>

// div淡入淡出效果
.d3chart-map-topRight-fadesoutOpen {
  -webkit-animation-name: fadeIn; /*动画名称*/
  -webkit-animation-duration: 1s; /*动画持续时间*/
  -webkit-animation-iteration-count: 1; /*动画次数*/
  -webkit-animation-delay: 0s; /*延迟时间*/
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  10% {
    opacity: 0.2; /*初始状态 透明度为0*/
  }
  20% {
    opacity: 0.36; /*初始状态 透明度为0*/
  }
  30% {
    opacity: 0.51; /*中间状态 透明度为0*/
  }
  40% {
    opacity: 0.64; /*中间状态 透明度为0*/
  }
  50% {
    opacity: 0.75; /*中间状态 透明度为0*/
  }
  60% {
    opacity: 0.84; /*中间状态 透明度为0*/
  }
  70% {
    opacity: 0.9; /*中间状态 透明度为0*/
  }
  80% {
    opacity: 0.96; /*中间状态 透明度为0*/
  }
  90% {
    opacity: 0.99; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
.d3chart-map-topRight-fadesoutClose {
  -webkit-animation-name: fadeOut; /*动画名称*/
  -webkit-animation-duration: 1s; /*动画持续时间*/
  -webkit-animation-iteration-count: 1; /*动画次数*/
  -webkit-animation-delay: 0s; /*延迟时间*/
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; /*初始状态 透明度为0*/
  }
  10% {
    opacity: 0.99; /*初始状态 透明度为0*/
  }
  20% {
    opacity: 0.96; /*初始状态 透明度为0*/
  }
  30% {
    opacity: 0.9; /*中间状态 透明度为0*/
  }
  40% {
    opacity: 0.84; /*中间状态 透明度为0*/
  }
  50% {
    opacity: 0.75; /*中间状态 透明度为0*/
  }
  60% {
    opacity: 0.64; /*中间状态 透明度为0*/
  }
  70% {
    opacity: 0.51; /*中间状态 透明度为0*/
  }
  80% {
    opacity: 0.36; /*中间状态 透明度为0*/
  }
  90% {
    opacity: 0.2; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 0; /*结尾状态 透明度为1*/
  }
}

2、横竖移动

从父级div的中间开始移动，from 开始位置坐标，to 结束位置坐标
<div (click)="itemClick(item, i, $event)"
     [ngClass]="{'grid-content-item-animation': i===0, 'grid-content-item': true}"
     *ngFor="let item of gridItems; let i = index">
  <img class="grid_content-item-img" src="assets/img/charts/white.svg">
  {{item.info}}
</div>

.grid-content-item-animation {
  animation: myfirst 2s;
  -moz-animation: myfirst 2s; /* Firefox */
  -webkit-animation: myfirst 2s; /* Safari and Chrome */
  -o-animation: myfirst 2s; /* Opera */
}

@keyframes myfirst {
  from {
    transform: translate(-50%, -350px);
  }
  to {
    transform: translate(0, 0);
  }
}

@-moz-keyframes myfirst /* Firefox */ {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(0, 0);
  }
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(0, 0);
  }
}

@-o-keyframes myfirst /* Opera */ {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(0, 0);
  }
}

3、波纹动画

1）svg animate 动画


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>test</title>
<style>
svg {
  width:500px;
  height:500px;
}
</style>
</head>
<body>
<svg>
	<circle fill="#1f900c" stroke="#1f900c" id="circle"
 cx="200" cy="200" r="20">		
	</circle>
	<circle fill="#1f900c" stroke="#1f900c" id="circle"
 cx="200"
 cy="200" r="20">
		<animate attributeName="r" from="20" to="50" 
begin="0s" dur="6s" repeatCount="indefinite"/>		
		<animate attributeName="opacity" from="0.8" to="0"
 begin="0s" dur="6s" repeatCount="indefinite"/>
	</circle>
	<circle fill="#1f900c" stroke="#1f900c" cx="200"
 cy="200" r="20">
		<animate attributeName="r" from="20" to="50"
 begin="3s" dur="6s" repeatCount="indefinite"/>
		<animate attributeName="opacity" from="0.8" to="0" 
begin="3s" dur="6s" repeatCount="indefinite"/>
	</circle>
</svg>
</body>
</html>

猜你喜欢