![[HTML/CSS]动画效果以及自定义动画效果](https://200zi.50zi.cn/uploadfile/img/15/593/bb09e49d5dc11a458c731285b033fe27.jpg)
一，实现div或者文字的当鼠标浮于其上时的动画效果：
1，transition加在div中，实现动画效果的过渡效果，transition: all 3s;其中all表示所有样式都参与过渡，3s表示实现效果的时间；linear为使动画匀速进行；
2，transform放在hover中实现动画效果，translate表示位置的移动；scale表示缩放，其中的值为原大小的几倍；rotate表示旋转，其中旋转的度数单位为deg。
<html><head><meta charset="utf-8"><style>div{width: 300px;height: 300px;background: skyblue;/* 动画过渡效果 */transition: all 3s linear;}div:hover{background: rgb(0, 47, 167);/* transform 2d动画；translate 位置移动 *//* scale 缩放 *//* rotate 旋转；deg表示度数 *//* transform: rotate(60deg); */transform: translate(50px) scale(0.5) rotate(360deg);}</style></head><body><div></div></body></html>
二，实现自定义动画效果：
1，自定义动画效果为设置一个keyframes关键字用来定义此动画效果，
@keyframes abc {
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}
其中abc为此动画的名字，百分数为该动画效果每时间段内的样式，
2，调用定义好的动画效果：animation: abc 1s infinite linear;
abc为动画名，1s为动画时间，infinite使动画循环进行，linear为使动画匀速进行。
例子代码：
<html><head><meta charset="utf-8"><title></title><style>body{background-color: black;}div{width: 800px;height: 100px;line-height: 100px;background: skyblue;margin: 50px auto;color: white;font-size: 60px;font-weight: bold;text-align: center;animation: abc 1s infinite linear;}@keyframes abc {20%{background-color: blue;color: white;}40%{background-color: gold;color: black;}60%{background-color: red;color: green;}80%{background-color: green;color: purple;}100%{background-color: purple;color: yellow;}}</style></head><body><div>到沈阳了，指定没你好果汁吃</div></body></html>
