直播带货服务

kyeframes可以设置多个关键帧

keyframes关键帧

kyeframes可以设置多个关键帧

其实对于“帧”这个概念平时接触是比较多的,比如电影或录制视频都会有“帧”的概念。下面我们就一起来看看动画中的这个keyframes是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那么CSS3的animation就是由“keyframes”这个属性来实现这样的效果,在CSS3中使用@keyframes规则来创建动画,kyeframes可以设置多个关键帧,每个关键帧表示动画过程中的一个状态。@keyframes规则的语法格式如下:

 

@keyframes animationname{

 

         keyframes-selector{css-styles;}

 

}

 

在上面的语法格式中,animationname表示当前动画的名称,它将作为引用时的唯一标识,不能为空。keyframes-selector是关键帧选择器,即指定当前关键帧要应用到整个动画过程中的位置值是一个百分比,from或者to。其中from或0%效果相同表示动画的开始,to和100%效果相同表示动画的结束。css-styles定义执行到当前关键帧时对应的动画状态,以上3个属性都是必需的,缺一不可。

通过案例6-15来体验应用CSS3的animation属性和关键帧@keyframes来完成一个简单的div移动和变色的效果。

先完成一个基本的页面,绘制一个div,宽度和高度为300,初始时在屏幕左上角,背景色为红色,在2s的时间内向右移动500px,并且背景色变为蓝色,代码如下

6-15   example15.html

 

<!DOCTYPE html>

 

<html>

 

<head>

 

    <meta  charset="utf-8">

 

     <title>animation动画基础</title>

 

    <style>

 

       div{  width: 300px; height: 300px; background-color: red; margin: 0;

 

       /*定义animation动画属性,名称为movediv,时间为2s,是组合属性*/

 

         animation: movediv 2s;

 

        }

 

   @keyframes movediv{ /*定义关键帧,这里只有两帧,即开始状态和结束状态*/

 

        from{

 

            /*定义刚开始时的一些处理,通常直接使用原始样式*/

 

             }

 

           to{ margin-left: 500px; background-color: blue; }

 

        }

 

     </style>

 

</head>

 

<body>

 

      <div></div>

 

</body>

 

</html>

 

打开浏览器,运行代码,经过2s后,div往右移动500px,并且背景色变成了蓝色,整个背景色的变换过程非常平滑,而不是很生硬地直接变过去。


© Copyright 六六互联.Some Rights Reserved.www.ic.vip