animation 动画和3D 转换

1.animation 动画

1.步骤

• 1. 在css中定义动画函数
• 1. 给目标元素调用动画函数

  /*
  使用动画的步骤
  1.在css中声明动画函数
  1.1 使用关键字@keyframes+动画名 定义动画函数
  1.2 在动画函数内 定义帧动画
  0% 动画 开始 的样式
  50% 动画执行到一半的时候的样子
  100% 动画执行完毕之后的样子

  */

  /*1.声明动画函数*/
  @keyframes ani_div{
       
    0%{
       
    		width:100px;
      	background-color:red;
  	} 
    50%{
       
    		width:150px;
      	background-color:pink;
  	}
    100%{
       
  	width:300px;