[分享]css3如何定义动画

 CSS3如何定义动画 CSS3有很多定义动画的方法，这里介绍两种常用的方式：使用keyframes定义动画和利用transition属性。以下是具体细节： keyframes定义动画： keyfra...

 CSS3如何定义动画
CSS3有很多定义动画的方法，这里介绍两种常用的方式：使用@keyframes定义动画和利用transition属性。以下是具体细节：
@keyframes定义动画： @keyframes是CSS3中定义动画的一种语法，用来控制动画在不同的时间点上显示的样式。使用@keyframes定义动画，可以分为以下步骤：
1. 使用@keyframes关键字定义动画名称； 2. 定义动画的关键帧，即在不同的时间点上显示的样式； 3. 把动画绑定到元素上。
下面是一个例子，实现了一个简单的平移动画：

 <p class="move">这是一个会动的文字</p> 

 @keyframes move {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(100px);
        }
    }
<br>
    .move {
        animation: move 1s infinite;
    } 

上面的例子中，首先使用@keyframes定义了一个名为“move”的动画，然后定义了两个关键帧：from代表动画的起始状态，to代表动画的结束状态。在这个例子中，从初始状态到结束时，通过transform属性让文字水平平移到了页面的右侧。
接下来，通过animation属性将动画与“.move”类的元素绑定在一起，1s表示动画的总持续时间，infinite表示动画循环播放。
利用transition属性： 除了使用@keyframes定义动画外，CSS3还提供了一个transition属性，实现元素在不同状态之间过渡的效果。利用transition属性定义动画，只需要设置元素在何种状态下开始过渡以及过渡效果的持续时间和缓动函数即可。
以下是一个例子，实现了一个简单的渐隐动画：

 <p class="fade">这是一个会动的文字</p> 

 .fade {
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }
<br>
    .fade:hover {
        opacity: 0.5;
    } 

上面的例子中，首先设置“.fade”的初始状态为完全不透明，利用transition属性告诉浏览器，当“opacity”属性发生变化时，用1秒的时间和缓动函数“ease-in-out”过渡到新状态。当用户鼠标悬停在“.fade”元素上时，利用:hover选择器将其透明度变为0.5。在此之后，浏览器会自动执行从当前状态到新状态的1秒过渡动画，最终呈现出渐隐效果。
总之，利用CSS3可以方便地定义各种动画效果，这里只介绍了@keyframes和transition两种方式，有兴趣的同学可以进一步学习其他的动画技巧。