CSS可以使用动画来实现一些比较炫酷的效果,下面是实现CSS动画的一些关键点:
@keyframes myAnimation {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
这段代码定义了一个名为myAnimation
的动画,其中有三个关键帧:0%、50%和100%。每个关键帧都定义了动画中的某些属性,这里定义了opacity
属性,分别对应了0、0.5和1三个值。
div {
animation: myAnimation 2s ease infinite;
}
这段代码将myAnimation
动画应用于div
元素。其中,2s
表示动画的持续时间为2秒,ease
表示动画的缓动函数为默认的缓动函数,infinite
表示动画将无限循环播放。
div {
transition: width 2s;
}
div:hover {
width: 200px;
}
这段代码将在div
元素宽度发生变化时,实现一个2秒的过渡动画。当鼠标悬停在div
元素上时,将会使它的宽度变为200像素,这时过渡动画就会自动播放。
需要注意的是,必须指定一个CSS属性才能使用过渡动画。
div {
transform: rotate(45deg);
}
这段代码将会使div
元素顺时针旋转45度。
以上就是CSS实现动画效果的一些关键点。