animation
定义关键帧
@keyframes 自定义的名称{
from{
CSS的属性值、多个
}
to{
CSS的属性值、多个
}
}
@keyframes move {
from{
margin-left: 100px;
background-color: violet;
}
to{
margin-left: 10px;
background-color: aquamarine;
height: 100px;
width: 100px;
}
}
@keyframes username{
0%{}
20%{}
60{}
100%{}
}
@keyframes change {
0%{margin-top: 100px;}
25%{margin-top: 20px;}
50%{margin-top: 70px;opacity: 0.3;}
100%{margin-top: 10px;}
}
@keyframes jump{
0%{width: 100px;}
25%{width: 25px;}
60%{width: 70px;}
100%{width: 300px;}
}
调用关键帧
选择器{
animation-name:user-defined-name;//引入的关键帧
animation-duration:3s;//动画的时长
animation-delay:2s;//延时
animation-iteration-count:3/infinite; //重复次数
animation-timing-function:linner/ease/steps();//速度曲线
animation-play-state:running/paused //正在运行、停止运行(动画状态)
Animation-direction:normal/reverse/alternate/alternate-reverse
//Animation:name 3s 2s .. ..;//简写形式
}
属性 | 描述 |
---|---|
animation-name | 动画名称(每个名称代表一个由@keyframes定义的动画序列) |
animation-duration | 动画周期的时长 |
animation-timing-function | 动画的速度曲线 |
animation-delay | 动画延迟执行时间 |
animation-iteration-count | 动画在结束前运行的次数 |
animation-direction | 动画是否反向播放 |
animation-fill-mode | 填充模式,设置CSS动画在执行之前和之后如何将样式应用于其目标 |
animation-play-state | 设置动画暂停/恢复 |
.one{
/* 动画有自己的默认状态、开始状态、结束状态 动画执行完成后又恢复到自己的默认状态 */
animation-name: move;
animation-duration: 5s;
/* 动画时长 */
animation-iteration-count: infinite;
/* 重复次数,默认为一次 infinite设定了有循环不停的动画 */
/* 若此处有具体次数,执行状态:2s->to->from->to->from->恢复到自己的状态 */
animation-delay: 2s;
/* 动画开始前的延时 ,默认为0s,只会延时一次,自己的默认状态 */
/* animation-direction: reverse; */
/* 默认值normal:from->to
reserve:to->from */
animation-direction: alternate;
/* 交替:from->to->from->to... */
animation-direction: alternate-reverse;
/* 反转交替:to->from->to->from */
/* animation-play-state: paused; */
/* 默认值为running,一般与js搭配使用,比如点击某处时暂停该动画 */
/* animation-fill-mode: none; */
/* 填充模式:延时、动画结束之后都是自己原来的状态 */
/* animation-fill-mode: forwards; */
/* animation-fill-mode: backwards; */
/* 执行状态:2s to->...->自己的状态 */
animation-fill-mode: both;
/* 延时的时候使用的是第一帧,动画结束后是最后一帧 (使用这个的前提是animation-iteration-count有具体数值)*/
animation-timing-function: linear;
/* 在animation-direction中的运动速度 linear为匀速 */
}
.two{
/* animation: change 3s; */
/* 至少写动画名词和动画时长 */
animation: change both 3s linear 2s infinite;
/* 第一个时长为动画时长,第二个为延时时长 */
}
transition 过渡
更改CSS属性时控制动画速度
选择器{
//CSS的属性值
transition:;//简写属性
}
选择器:hover{
//鼠标悬停时对应的CSS属性值
transition-property: all;
transition-duration: 0s;
transition-timing-function: ease;
transition-delay: 0s;
}
属性 | 描述 |
---|---|
transition-property | 过渡属性 |
transition-duration | 过渡动画所需的时间 |
transition-timing-function | 时间曲线 |
transition-delay | 过渡延迟时间 |
body>div:first-child{
transition: background 2s linear 1s;
/* transition与hover搭配使用 只能过渡一个属性 */
/* animation与transition异同点:
1.animation需先定义再使用,transition直接使用,需要搭配hover才能看到效果
2.animation可以同时对多个css属性值进行动画 transition只可单值
3. 页面一加载就会生效 页面加载没有效果
4.都可以搭配hover */
}
transform 变形
属性 | 描述 |
---|---|
transform-origin | 用于指定一个元素变形的原点 |
函数 | 描述 |
---|---|
rotate | 定义了一种将元素围绕一个定点旋转而不变形的转换 |
skew | 对元素的剪切或者扭转 |
scale | 更改元素的大小 |
translate | 移动元素 |
body>div:first-child{
transform: rotatex(45deg);
/* rotate为旋转 */
}
body>div:nth-child(2){
/* transform: skew(45deg,20deg); */
/* 在x轴、y轴上的倾斜 */
transform: skewx(20deg);
}
body>div:nth-child(3){
transform: scale(2,0.5);
/* 缩放比例 在x、y轴上变化的倍数 */
}
body>div:nth-child(4){
transform: translate(100px,200px);
/* 移动 x、y轴上 */
}