CSS3动画和特效

2023-03-23 211 阅读3分钟

背景前提

通常来说，对于web前端来实现动画效果，不外乎通过下面几种方案：

CSS动画：利用css3的样式效果可以将dom元素做出动画的效果来。
SVG动画：SVG意为可缩放矢量图形，同时也是HTML中的一个标签，在实现动画方面较为小众了一些，但其提供了不少的API来实现动画效果，并且兼容性也不差。
Canvas动画：利用Canvas提供的API，不断清除--绘制这样一帧一帧的做出动画效果。

目标效果=>实现水球进度条

codepen.io/ming-xin/pe…

整体内容

CSS3动画

CSS3动画是使元素从一种样式逐渐变化为另一种样式的效果。

@keyframes（规则）属性
1. 注意不同浏览器和版本兼容
2. 要创建 CSS3 动画，你需要了解 @keyframes 规则。
3. @keyframes 规则是创建并命名动画。
4. @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
5. ```
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
```
animation（动画）属性
1. 注意不同浏览器和版本兼容
2. 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
3. 指定至少这两个CSS3的动画属性绑定向一个选择器：
4. 规定动画的名称
5. 规定动画的时长
6. ```
/* 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒： */
div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
```

2.1 animation属性中的steps功能符深入介绍

效果展示

类似于魔术，当表演开始时总会需要有遮挡住的内容，不希望给观众（用户）所看到

overflow （溢出）属性

overflow属性指定如果内容溢出一个元素的框，会发生什么。

默认值是visible，内容不会被修剪，会呈现在元素框之外。当制作动画特效时建议设置为hidden，内容会被修剪，并且其余内容是不可见的。

opacity（透明度）属性

设置一个div元素的透明度级别

opacity 属性指定了一个元素的不透明度。当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。

如果需求希望给dom元素做隐藏动画特效，那么建议通过修改opacity属性值来实现效果。（重要事情说三遍！！！）

transition（过渡）属性

设置元素的过渡效果

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

codepen.io/ming-xin/pe…

参考借鉴内容

这一篇让你彻底搞懂贝塞尔曲线的原理

解析transform,transition和animation的区别

css3动画+svg实现水球进度条