过渡
关键字:transition
作用:
- 可以指定一个属性发生变化时的切换方式
- 可以创建一些非常好的效果,提升用户的体验
四个属性
- transition-property:指定我们要执行过渡的属性
大部分属性都支持过渡效果,宽度、高度、内边距、外边距、像素、颜色等 多个属性间用逗号隔开,如果所有属性都要过渡,则使用all关键字
注意:过渡时必须从一个有效值向另外一个有效值进行过渡
例如:
transition-property: width;
- transition-duration:指定过渡效果的持续时间
时间单位:秒(s)和毫秒(ms) 1s=1000ms
例如
transition-duration: 2s;
- transition-delay:过渡效果延迟
transition-delay:2s;/*2s后再开始执行过渡效果*/
- transition-timing-function:过渡的时序函数
指定过渡的执行方式
可选值:
- ease:默认值,慢速开始,先加速,后减速
- linear:线性方式,匀速运动
- ease-in:慢速开始,加速运动
- ease-out:快速开始,减速运动
- ease-in-out:先加速,后减速
- cubic-bezier():来指定时序函数
- step():分步执行过渡效果
- 简写
transition可以同时设置过渡相关的所有属性,只有一个次序要求,如果要写延迟,第一个时间是过渡时间,第二个是延迟时间
米兔练习:
css代码:
.box1{
height: 152px;
width: 75px;
margin: 0 auto;
background-image:url(../example/mitu.png);
background-position: 0 0;
transition: .3s steps(3);
}
.box1:hover{
background-position: -225px 0;
}
html代码:
<div class="box1"></div>
米兔图片
效果实现:实现行走的状态
动画
动画和过渡类似,都是可以实现动态的效果,不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果
设置动画效果,必须先要设置一个关键帧(一幅图片就是一帧),关键帧设置了动画执行的每一个步骤
关键帧格式:
@keyframes text/*关键帧名(可以自己起)*/
{
/*from表示动画的开始位置,也可以使用0%*/
from{
}
/*to表示动画的结束位置,也可以使用100%*/
to{
}
}
关键帧属性
-
animation-name:要对当前元素生效的关键帧名字
-
animation-duration: 动画执行时间
-
animation-delay:动画延迟
-
animation-timing-function: 动画时序函数
-
animation-iteration-count: 动画执行次数,其中填写数字表示重复次数,infinite表示无限执行
-
animation-direction: 指定动画运行方向
可选值:
- normal:默认值,从from向to执行
- reverse:反向执行,从to向from执行
- alternate:从from到to,重复执行动画时,反向执行,去的时候从from向to,回来时to向from
- alternate-reverse:从to到from,重复执行动画时,反向执行
- animation-play-state:设置动画的执行状态
可选值:
- running:默认值,表示动画运行
- paused:动画暂停
- animation-fill-mode:动画的填充模式
可选值:
- none:默认值,动画执行完毕,元素回到初始位置(不是from的位置,是元素本身的初始位置)
- forwards:动画执行完毕,元素会停止在结束的位置(to的位置)
- backwards:动画延迟等待时,元素就会处在开始时间
- both:结合了forwards和backwards
例如:
.box2{
background-color: #bfa;
/*设置box2的动画*/
animation-name: text;
/*动画执行时间*/
animation-duration: 2s;
/*动画执行方向*/
animation-direction: normal;
/*动画执行状态*/
animation-play-state: running;
/*动画填充模式*/
animation-fill-mode: forwards;
}
米兔动画:
效果:米兔是不断的在行走的
其中动画也可以分段进行,例如:
@keyframes trump {
from{
background-position: 0 0;
}
50%{
background-position: -600px 0;
}
75%{
background-position: 0px -105px;
}
to{
background-position: -600px -105px;
}
}
变形平移
transform:用来设置元素的变形效果
可选值:
- translateX():元素沿x轴方向平移
- translateY():元素沿y轴方向平移
- translateZ():元素沿z轴方向平移
注意:平移元素要是使用百分比,则百分比是相对于自身来计算的
例如:元素宽度为100px,设置transform:translateX(50%);则元素向右移动50px
设置元素垂直居中:
transform: translateX(-50%);
transform: translateY(-50%);
Z轴平移
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离
距离越大,元素离人越近,z轴平移属于立体效果,近大远小,默认情况下网页不支持透视,如果我们需要看见效果,我们必须设置网页的视距。
例如:
旋转
通过旋转沿着x、y或z轴指定的角度旋转
transform属性(变形平移也用的transform属性)
可选值:
- rotateX():沿X轴旋转
- rotateY():沿y轴旋转
- rotateZ():沿z轴旋转
例如:
transform: rotatex(45deg);
/*deg表示角度*/
transform: rotatex(.5turn);
/*turn表示圈,.25turn表示四分之一圈*/
backface-visiblity属性:是否显示元素的背面
缩放
依旧使用transform属性
可选值:
- scaleX():对水平进行放大缩小,括号内可写数字,数字大于一表示放大,小于一表示缩小。
- scaleY():对垂直进行放大缩小
- scale():对水平、垂直同时放大缩小
例如: