1、transition： 平衡过渡
transition ：过渡效果的 CSS 属性的名称 完成过渡效果需要多少秒或毫秒 速度效果的速度曲线 过渡效果何时开始
1）过渡效果的 CSS 属性的名称（一般有）：all、no、 width、height
2）速度效果的速度曲线（动画的速度曲线）：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
2、animation： 动画
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n8" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> 一般通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。</pre>
例子：
animation: mymove 开始时间 动画的速度曲线 延迟 重复次数 是否应该轮流反向播放动画
@keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }
3、transform： 改变元素的大小、位置
- translate:移动
translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 2) rotate：旋转
旋转的时候，可以给旋转的模块设置一个原点 (下图的圆心为设置的原点，模块内的点为原始的原点)
transform-origin: x , y;
-
scale：放缩
-
skew：扭曲（倾斜）
-
matrix:矩阵，一般用来变换前面四种没有的效果，也可以实现前面四种效果
4、动画技巧：
1、animation-delay：设置为负值
animation-delay：定义动画何时开始
默认为0 立即执行动画 正值 延迟指定时间后执行动画 负值 立即执行，但跳过指定时间后进入动画（比如取值 -1，即是跳过动画执行的一秒，从 00:01 开始执行动画） 例子：
1）效果图 ：动画延迟
2）代码：animation-delay
2、设置border的颜色
边框分为4部分
border-left-color、border-top-color、border-right-color、border-bottom-color
例子：
1）效果图：边框颜色
2）代码：border-left+animation+transform
3、设置border的宽度
border-left-width、border-top-width、border-right-width、border-bottom-width
网友评论