Css3动画
Opened this issue · 0 comments
transition
过渡动画,定义css初始样式开始到结束时候中间过度时间段内的动画效果,可称之为补间动画。
状态
开始状态(动画放在这个状态里面)
结束状态(最终形态)
参数
- transition-property: 规定对哪个属性进行过度,all为默认值
可以指定要进行过渡的css属性,如果提供多个属性值,以逗号进行分隔:
.style {transition-property: opacity, left, top, width;)
- transition-duration 过渡执行时间
- transition-timing-function: 动画执行的速度:
ease(逐渐变慢) 默认值
linear匀速
ease-in(加速)
ease-out(减速)
ease-in-out(先加速后减速
cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
- transition-delay 动画延时执行时间,默认为0
div {
transition-property: width;
transition-duration: 2s;/*过度时间2秒*/
transition-timing-function: ease;
transition-delay: 2s;/*y延时2秒开始过度*/
}
为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上:
div {
transition: width 2s ease 2s;
}
如果使用属性的默认值,则可以省略:
div {
transition: width 2s;
/*相当于*/
/*transition: width 2s ease 0*/
}
使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。
<div>xiaoyueyue</div>
div {
width: 200px;
height: 200px;
background-color: green;
border-radius: 100px;
text-align: center;
line-height: 200px;
color: #fff;
font-weight: 700;
transition: width 3s, height 3s, background-color 3s, opacity 3s;
}
div:hover {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: red;
opacity: 0;
}
还可以使用自定义类来实现
div {
width: 200px;
height: 200px;
background-color: green;
border-radius: 100px;
text-align: center;
line-height: 200px;
color: #fff;
font-weight: 700;
transition: width 3s, height 3s, background-color 3s, opacity 3s;
}
div.on {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: red;
opacity: 0;
}
var box = document.querySelector('div');
box.onmouseenter = function () {
box.classList.add('on');
}
2D转换(transform)
浏览器支持
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意: Internet Explorer 9 要求前缀 -ms- 版本.
功能 | 书写 | 补充 |
---|---|---|
1.位移 | translate(x,y) | 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移,加单位:如px |
2.旋转 | rotate(30deg) | (角度设置正值(顺时针),负值(逆时针)) |
3.缩放 | scale(倍数) | 整数(大于1)放大 小数(小于1)缩小, scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。 |
4.倾斜 | skew(30deg,45deg) | 第一个值垂直方向倾斜,第二个方向代表水平倾斜 |
5.旋转原点 | transform-origin:left top;(以左上角为旋转原点) | 改变旋转原点的位置应该一开始就改变 40px 50px; |
例子,直径为200的圆鼠标移入后向右移动100px同时颜色渐变为红色:
div {
width: 200px;
height: 200px;
background-color: green;
border-radius: 100px;
text-align: center;
line-height: 200px;
color: #fff;
font-weight: 700;
transition: background-color 3s, transform 3s;
}
.on {
transform: translate(100px);
background: red;
}
3D转换
perspective:1000px; // 透视
取值为眼睛距离图片的距离 600-1000px 是人眼最舒服的距离
设置有两种方式
-
给父元素设置
-
作为transform的属性写进transform里面
transform-style:preserve-3d; // 显示出3D效果
3D 位移
- translateX(30px) // 沿着x轴移动30px
- translateY(30px) // 沿着y轴移动30px
- translateZ(30px) // 沿着z轴移动30px
3D 旋转
- transform-origin:top/bottom/center; // 沿着哪里旋转
- transform:rotateX(10deg) // 沿着x轴旋转
- transform:rotateY(10deg) // 沿着y轴旋转
- transform:rotateZ(10deg) // 沿着z轴旋转
3D 缩放
- transform-origin:top/bottom/center; // 沿着哪里缩放
- scaleX(10deg) // 沿着x轴缩放
- rscaleY(10deg) // 沿着y轴缩放
- scaleZ(10deg) // 沿着z轴缩放
动画
当在 @Keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:
- 规定动画的名称
- 规定动画的时长
关键帧的时间单位
数字:0%、25%、100%等
字符:from(0%)、to(100%)
例子:
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
div {
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
像前面讲的transition属性一样,也可以把这些animation属性简写到一个animation中,使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中
div {
animation:myfirst 5s;
}
参数
含义 | 属性名 |
---|---|
动画名称 | animation-name |
持续的时间 | animation-duration |
执行次数 | animation-iteration-count(默认为1次,infinite 一直执行) |
延时执行的时间 | animation-delay:2s |
执行的速度 | animation-timing-function:inear 匀速 ease 缓冲 ease-in 由慢到快 ease-out 由快到慢 ease-in-out 由慢到快再到慢。cubic-bezier(number,number,number,number):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内 |
动画逆波 | animation-direction:alternat动画时间之外的状态 |
动画时间之外的问题 | animation-fill-mode:forwords 停止到动画结束的状态 / backwords (默认) |
动画的播放状态 | animation-play-state:( running 播放 和paused 暂停 ) |
播放前重置,动画是否重置后再开始播放 | animation-direction alternate动画直接从上一次停止的位置开始执行 normal动画第二次直接跳到0%的状态开始执行 |
注意,为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀
动画执行完成后触发的事件
当CSS 3的transition动画执行结束时,触发webkitTransitionEnd事件,使用:
dom.addEventListener(‘webkitTransitionEnd’,function(){})
animation.css使用
添加cdn引用
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated
是每个要进行动画的元素都必须要添加的类。
给上面的样式添加一个摇动的动画,因为摇动的动画类名为shake
,所以代码是这样的:
var box = document.querySelector('div');
box.onmouseenter = function () {
box.classList.add('animated','shake');
}
至于动画的效果有差异可自定义样式进行覆盖
animation.css提供动画的可用class类名
Class Name | |||
---|---|---|---|
bounce |
flash |
pulse |
rubberBand |
shake |
headShake |
swing |
tada |
wobble |
jello |
bounceIn |
bounceInDown |
bounceInLeft |
bounceInRight |
bounceInUp |
bounceOut |
bounceOutDown |
bounceOutLeft |
bounceOutRight |
bounceOutUp |
fadeIn |
fadeInDown |
fadeInDownBig |
fadeInLeft |
fadeInLeftBig |
fadeInRight |
fadeInRightBig |
fadeInUp |
fadeInUpBig |
fadeOut |
fadeOutDown |
fadeOutDownBig |
fadeOutLeft |
fadeOutLeftBig |
fadeOutRight |
fadeOutRightBig |
fadeOutUp |
fadeOutUpBig |
flipInX |
flipInY |
flipOutX |
flipOutY |
lightSpeedIn |
lightSpeedOut |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
rotateOut |
rotateOutDownLeft |
rotateOutDownRight |
rotateOutUpLeft |
rotateOutUpRight |
hinge |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
slideOutUp |