过度动画: 从一个状态在一段时间内平稳的到下一个状态,在这个过程当中必须要有事件去触发
transition-property: 要过渡的属性（all代表所有属性）
transition-duration: 过度花费的时间
transition-delay: 动画延时的时间
transition-timing-function: 动画以何种方式过度（默认：ease）
自定义动画，拆开写的属性
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
也可以简写
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
1. 简写属性里面不包含 `animation-paly-state`
2. 暂停动画 `animation-paly-state: paused`; 经常和鼠标经过等其他配合使用
3. 要想动画走回来，而不是直接调回来：`animation-direction: alternate`
4. 盒子动画结束后，停在结束位置：`animation-fill-mode: forwards`
css
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
background-color: black;
transition-property: 100000;
}
.wrap {
width: 300px;
height: 300px;
background-color: red !important;
position: relative;
left: 20%;
top: 100px;
transform: rotate(45deg);
animation-name: move;
animation-duration: 1.3s;
animation-iteration-count: infinite;
box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, .2);
z-index: 100;
}
@keyframes move {
0% {
transform: rotate(45deg) scale(1);
}
25% {
transform: rotate(45deg) scale(.7);
}
50% {
transform: rotate(45deg) scale(1);
}
75% {
transform: rotate(45deg) scale(.7);
}
100% {
transform: rotate(45deg) scale(1);
}
}
.wrap::before {
width: 300px;
height: 300px;
background-color: red;
border-radius: 50%;
content: '';
position: absolute;
transform: translateX(-150px);
box-shadow: -20px 0px 20px 0px rgba(255, 255, 255, .2);
}
.wrap::after {
width: 300px;
height: 300px;
background-color: red;
border-radius: 50%;
content: '';
position: absolute;
transform: translateY(-150px);
box-shadow: -3px -20px 20px 0px rgba(255, 255, 255, .2);
}
#text {
background-image: -webkit-linear-gradient(0deg, red, aqua, blue);
font-size: 24px;
height: 200px;
width: 100%;
white-space: nowrap;
border-right: 2px solid transparent;
animation: typing 10s;
/* overflow: hidden; */
-webkit-background-clip: text;
color: transparent;
padding-top: 20px;
padding-left: 10px;
}
/** 自定义动画 **/
@keyframes typing {
0% {
width: 0;
}
100% {
width: 50em;
}
}
</style>
标签
<body>
<div>
<p id="text">我想去拥抱你，即使间隔春秋，山河阻拦，风雨交加，路遥马远，我都可以跨越重重艰险去找到你...</p>
</div>
<div class="wrap">
</div>
</body>
