本文详细讲解了CSS中过渡transition的手动触发方式，包括:hover, :active, :focus等，以及动画animation的自动执行属性，关键帧设置和常见库的使用。通过实例演示了如何在HTML中应用这些效果。
目录
一、过渡 transition(手动触发)
1. 过渡触发方式
| 触发方法 | 描述 |
|---|---|
| :hover{} | 鼠标悬停时触发 |
| :active{} | 单击元素并按住鼠标时触发 |
| :focus{} | 获得焦点时触发 |
| @media触发 | 符合媒体查询条件时触发 |
| 点击事件 | 点击元素时触发 |
2. 过渡要素
| 要素 | 描述 | 取值 |
|---|---|---|
| transition-property | 过渡属性 | none |
| all | ||
| property | ||
| transition-duration | 过渡持续时间 | time(s),默认0 |
| transition-timing-function | 过渡速度 | 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) ) | ||
| steps(int,start|end):参数：函数的间隔数,动画是从时间段的开头连续还是末尾连续 | ||
| cubic-bezier(n,n,n,n):自定义速度，n取0~1 | ||
| transition-delay | 过渡等待时长 | time(s),默认0 |
3. 过渡连写
transition: 过渡属性 过渡时长 运动速度 延迟时间;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
transition: width 1s linear 0s,height 2s linear 0s,background-color 2s linear 0s;
}
div:hover{width:200px;height:400px;background-color: orangered;}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、动画 animation(自动执行)
1.动画属性
| 属性 | 描述 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation-duration | 动画持续时长 | time,默认为0 |
| animation-timing-function | 动画速度曲线 | 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) ) | ||
| steps(int,start|end):参数：函数的间隔数,动画是从时间段的开头连续还是末尾连续 | ||
| cubic-bezier(n,n,n,n):自定义速度，n取0~1 | ||
| animation-delay | 动画等待时长 | time(s) |
| animation-iteration-count: | 动画播放次数 | n n次 |
| infinite 无限次 | ||
| animation-direction | 动画是否反向播放 | normal (默认),往返动画 |
| alternate 反向执行 | ||
| animation-fill-mode | 动画结束状态 | none 不做任何改变 |
| forwards 让元素结束状态保持动画最后一帧的样式 | ||
| backwards 让元素等待状态的时候显示动画第一帧的样式 | ||
| both 让元素等待显示动画第一帧, 结束保持动画最后一帧 | ||
| animation-play-state | 动画是否暂停 | running 继续 |
| paused 暂停 |
2.动画关键帧
格式：
@keyframs name{
//开始 中间过程 结束状态
0%{}
25%{}
50%{}
100%{}
}3. 动画连写
animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color:pink;
animation: leftToRight 1s linear 0s infinite alternate forwards;
}
div:hover{
/* 设置动画是否暂停 paused暂停*/
animation-play-state: paused;
}
/* 动画关键帧 */
@keyframes leftToRight {
0%{
height: 100px;
width: 100px;
}
25%{
height: 150px;
width: 120px;
}
50%{
height: 250px;
width: 150px;
}
100%{
height: 400px;
width: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>4.动画引入
引入css动画样式：Animate.css | A cross-browser library of CSS animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<h1 class="animate__animated animate__bounce">An animated element</h1>
<h1 class="animate__animated animate__wobble">An animated element</h1>
<h1 class="animate__animated animate__backInRight">An animated element</h1>
<h1 class="animate__animated animate__bounceIn">An animated element</h1>
</body>
</html>总结
以上就是今天要讲的内容，本文仅仅简单介绍了css中的过渡及动画的使用。
欢迎大家灌水交流！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
