深圳 网站开发公司,常见的cms网站,centos 7安装wordpress,聊天软件开发文档一、css属性过渡transition
1、解释#xff1a;
使用该属性后变化不会在一瞬间完成#xff0c;会有一个连续的变化效果。第一个参数设置哪些属性变化时需要有连续的效果。
不论用什么方式使属性的值发生变化#xff0c;transition都会生效。
2、语法#xff1a;
trans…一、css属性过渡transition
1、解释
使用该属性后变化不会在一瞬间完成会有一个连续的变化效果。第一个参数设置哪些属性变化时需要有连续的效果。
不论用什么方式使属性的值发生变化transition都会生效。
2、语法
transition: property duration timing-function delay;
transition-property: none|all| property;
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
transition: 过渡属性 过渡时间 过渡曲线 延迟时间
(1) 过渡属性可以设置 宽度、高度、transform等当有多个过渡效果时可以用逗号隔开或者用all来代表所有效果 (必写)
(2) 过渡时间单位是s表示花多久的时间达到变化后的效果 (必写)
(3) 过渡曲线默认 ease即逐渐慢还有以下选项可以选择linear 匀速ease-in 加速ease-out 减速ease-in-out 先加速后减速
(4) 延迟时间表示推迟多久执行过渡效果默认0s即不延迟可以自定义
3、示例
宽度变化颜色变化位置变化translate大小变化scale, 旋转角度rotate
compassionate-bird-5nhue8 - CodeSandbox
二、css属性动画animation
1、解释
transition只表示了一个状态到一个状态的过渡过程过渡过程是定死的。
animation可以自定义的过渡过程并且可以设置播放次数。
2、语法
1animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
使用animation来实现动画keyframes来定义元素的运动规律
(1) animation-name: 动画的名称即keyframes定义的动画名字必写
(2) animation-duration: 动画的执行时间一个动画多久执行完成必写
(3) animation-timing-function: 动画的速度曲线默认ease(逐渐变慢)还有这些选项linear 匀速ease-in 加速ease-in-out 先加速后减速ease-out 减速
(4) animation-delay: 动画执行的延迟时间默认0s
(5) animation-iteration-count: 动画的执行次数默认为1还可以选 infinite代表无限次
(6) animation-direction: 规定动画在下一周期是否逆向播放默认 normal 不逆向播放还可以选alternate 逆向播放
比如一个盒子从左走到右如果执行次数是1执行完成盒子就会立刻从右边弹回到最左边如果设置了alternate逆向播放那么盒子就会按照设定的速度曲线经过动画再回到左边
(7) animation-fill-mode: 规定动画的结束状态默认backwards 回到起始状态还可以选 保持状态 forwards
animation-direction设置了以后这个就不生效了
(8) animation-play-state: 设置动画的运行状态默认 running 运行还可以选 paused 停止2animation-delay
animation-delay 属性定义动画什么时候开始。允许负值-2s 使动画马上开始但跳过 2 秒进入动画。
animation-delay 值单位可以是秒s或毫秒ms。
3、示例
focused-bush-wv402l - CodeSandbox
三、transition、animation与3d动效结合
1、解释
transition、animation与3d动效结合能做出空间炫酷的3d空间动效
2、语法
总结一下3d位移和3d旋转的语法
// 父元素一定要定义 perspective
perspective: 500px// 如果父子元素都有3d动效那要给父元素设置transform-style
transform-style:preserve-3d// 位移
transform: translateZ(100px)
transform: translate3d(0,0,100px)
// 也可以定义x和y轴方向的移动那就是2d平面内的移动没有3d近大远小的效果// 旋转
transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(45deg)
transform: rotate3d(1, 1, 0, deg) // x轴和y轴都旋转45度, 此时是找矢量, 及对角线位置
3、示例
focused-bush-wv402l - CodeSandbox
四、常用动画库
没有必要自己写所有的css动画animate里包含了常用的动画css效果只要写入class就行。
Animate.css | A cross-browser library of CSS animations.
示例
use animate - CodeSandbox
五、 参考
https://www.jianshu.com/p/191b1c61e88e
https://www.jianshu.com/p/1f2b3649fae0
