📌  相关文章
📜  CSS3-动画

📅  最后修改于: 2020-10-26 04:59:52             🧑  作者: Mango

动画是进行形状更改并使用元素创建运动的过程。

@keyframes

关键帧将控制CSS3中的中间动画步骤。

带有左动画的关键帧示例-

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

上面的示例使用关键帧语法显示了动画的高度，宽度，颜色，名称和持续时间。

向左移动动画

现场演示

   

   
      
Tutorials Point

      
this is an example of moving left animation .

它将产生以下结果-

使用关键帧向左移动动画

现场演示

   

   
      
Tutorials Point

      
      
This is an example of animation left with an extra keyframe 
         to make text changes.

它将产生以下结果-