css3动画元素 |css考拉

css转换时间，js控制css class，css 3 旋转逆时针，css取消外边框颜色，dw怎么打开css设置器，html源码怎么和css源码，css考拉 css3动画元素 |css考拉

/* 创建平移动画 */
.box {
position: relative;
animation: slidein 3s ease-out;
}
@keyframes slidein {
from {
left: -100%;
}
to {
left: 0%;
}
}
/* 创建旋转动画 */
.box {
position: relative;
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 创建缩放动画 */
.box {
position: relative;
animation: scale 3s ease-in-out;
}
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}

代码中，大家使用了关键帧 @keyframes 规则来创建动画。通过设置 from 和 to 两个关键帧的属性值，大家就可以控制元素从起始状态到结束状态的动画过程。

以上就是使用 CSS3 动画元素创建动画效果的方法。当然，你也可以通过其他 CSS 属性来更加丰富动画效果，比如 opacity、color、border 等等。希望这篇文章可以帮助大家更深入的了解 CSS3 动画元素的使用。