一些css动画特效

1. 通过css实现一个物体从部分显示到完整显示的动画。

Animating with clip path

https://css-tricks.com/animating-with-clip-path/

#education.swiper-slide-active .eduAnim {

  animation: eduAnim 1s linear infinite;

}

/* https://css-tricks.com/animating-with-clip-path/ */

@keyframes eduAnim {

  0% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}

  100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

}

 

 

通过css 动画实现饼图或者环图的从无到有的动画

Svg  pie animation

https://codepen.io/oreakids/pen/xgggJd

https://codepen.io/ksksoft/pen/xsnmp

#medical.swiper-slide-active .coverCircleMedical {

  opacity: 1;

  fill: #666;

  stroke: #666;

  transform-box: fill-box;

  transform-origin: center;

  transform: rotateY(-180deg) rotate(-90deg);

  stroke-width: 144;

  r: 72;

  animation: medicalpie 2s linear;

  stroke-dasharray: 0, 428;

}

@keyframes medicalpie {

  0% {stroke-dasharray: 428,428;}

  100% {stroke-dasharray: 0, 428;}

}

 

animate.css 里面有很多现成的动画特效可以复制出来使用

https://daneden.github.io/animate.css/  效果显示

https://github.com/daneden/animate.css/blob/master/animate.css 源码复制

 

tranform-box: fill-box;  可以让svg元素相对与自身的位置运动、缩放。

https://codepen.io/giaco/pen/OwowJQ   css第17行

 

 

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

animation: name duration timing-function delay iteration-count direction;



animation-fill-mode: forwards;  可以让动画结束后的元素保留最后一帧的状态。