当涉及到CSS动画时,有几种方式可以实现动画效果。以下是一些常见的CSS动画技术:
- 使用
@keyframes
规则:@keyframes
规则允许你创建一个动画序列,定义动画的关键帧和属性值。例如,你可以创建一个旋转动画,让一个元素在页面上旋转。@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);} }.element {animation: rotate 2s infinite; }
2.使用transition
属性:transition
属性允许你在元素状态改变时平滑地过渡属性的值。例如,你可以让一个按钮在鼠标悬停时改变背景颜色,并且有一个平滑的过渡效果。
.button {background-color: #3498db;transition: background-color 0.3s ease;
}.button:hover {background-color: #2980b9;
}