[分享]css3怎么实现动画和执行动画

CSS3是一个强大的技术，在网页设计中使用它可以实现动画效果。CSS3提供了许多动画方法，比如transition、animation。下面将会详细介绍如何使用CSS3实现动画效果。/ 一、使用tra...

CSS3是一个强大的技术，在网页设计中使用它可以实现动画效果。CSS3提供了许多动画方法，比如transition、animation。下面将会详细介绍如何使用CSS3实现动画效果。

/* 一、使用transition实现动画效果 */
.box {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    transition: width 1s;
}
.box:hover {
    width: 200px;
}

/* 二、使用animation实现动画效果 */
.box {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    position: relative;
    animation: mymove 1s ease-in-out forwards;
}
@keyframes mymove {
    0% {left: 0;}
    100% {left: 200px;}
} 

上面的代码展示了使用transition和animation实现的动画效果。使用transition时，我们给需要实现动画效果的元素添加hover事件，当鼠标悬浮在该元素上时，元素的宽度从100px变成200px，实现了一个简单的动画效果。使用animation时，我们使用@keyframes来描述动画，通过不同的百分比定义样式，然后将这些样式放在动画名称后面的大括号中，最后通过animation属性将动画应用到需要动画的元素上。

需要注意的是，在使用animation时，我们需要给需要实现动画效果的元素设置position属性，否则动画将不会按照我们的要求执行；另外，我们需要在动画名称后面设置duration（动画执行的时间），timing-function（动画执行的速度曲线）和fill-mode（动画执行结束后的状态），这些属性的设置可以进一步调整动画效果。