CSS3中用transition属性来描述动画如何运动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
transition
定义文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html// width 表示什么属性需要用到过渡动画， 这里的例子是 宽度// 1s 表示动画时长// linear 表示的是一种变化曲线// 0s 表示延迟时间， 代表动画被延迟几秒后执行transition: width 1s linear 0s
下面我们重点聊聊两点:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
1. 哪个属性需要过渡?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
2. 变化曲线.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
CSS中哪些属性可以被过渡文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
- 所有数值类型的都可以过渡， 例如: height, width, border-radius 等。
- 背景颜色和文字。
- 所有的变形（上两篇讲的2D和3D变形）。
- 如果需要全部属性有动画效果， 则第一个参数 写 all。
示例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
正方形变圆形（border-radius 属性过渡）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>直角变圆角</title> <style> .box { width: 200px; height: 200px; background-color: red; border-radius: 0; margin: auto; }
.box:hover { border-radius: 50%; transition: border-radius 1s linear 0s; }</style> </head> <body> <div class="box"></div> </body></html>
缓动曲线
缓动曲线也叫缓动参数，就是一种指定速率的变化曲线。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
根据变化速率的不同分成了上述的几种曲线。如果这几种曲线在生产过程中并不符合要求，可以使用以下网址生成曲线。生成的这种线叫贝塞尔曲线。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
网址：https://cubic-bezier.com/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
自定义曲线文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
通过 https://cubic-bezier.com/ 生成曲线函数（设置方向和速率），并点击拷贝函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
将曲线函数拷贝到代码中， 本次示例 描述一个方块按照我们定义的运动曲线从左到右做直线运动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>贝塞尔曲线</title> <style> * { margin: 0; padding: 0; }
.box { border: 1px solid #000; }
.sonBox { margin-top: 5px; width: 50px; height: 50px; background-color: orange; margin-bottom: 10px; position: relative; left: 0; }
.box:hover .sonBox { left: 1000px; transition: left 5s cubic-bezier(0.27, 0.96, 0.82, 0.13) 0s; }</style> </head> <body> <div class="box"> <div class="sonBox"></div> </div> </body></html>
总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
过渡动画用 transition 属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
过渡属性决定了哪些属性参与过渡动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
动画时长决定了动画播放时间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
缓动曲线决定了运动的速率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html
延迟动画决定了动画被延迟几秒后播放。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53558.html