- 通过css实现一个物体从部分显示到完整显示的动画。
Animating with clip path
https://css-tricks.com/animating-with-clip-path/
text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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
text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#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
text
1
2
3
4
5
6
animation: name duration timing-function delay iteration-count direction;
animation-fill-mode: forwards; 可以让动画结束后的元素保留最后一帧的状态。