动画1

Posted 2021-09-14 张东红

  transition   过渡
  transform    2D，3D
  移动盒子的位置： 定位 盒子的外边距  2d转换移动
  一、2D
   转换（transform）  是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果
   
   旋转：rotate移动：translate
   缩放：scale
   1.移动：translate（可跟px，%）(对行内元素是无效的比如span)
    %是盒子自身的宽高度
    语法：
         transform:translate(x,y);合在一起写（下面是分开写）
         transform:translateX(n);
         transform:translateY(n);



   2.旋转rotateo
     语法：
          transform:rotate(度数（deg）);
      重点
          1.rotate里面跟度数，单位deg比如rotate(45deg)
          2.角度为正时，顺时针，负时，为逆时针
          3.默认旋转的中心点是元素的中心点  
          
                  
   2.1.设置转换中心点transform-origin
      语法：
           transform-origin:(x,y)
      重点：
          1.注意后面的参数x和y用空格隔开
          2.x y默认转换的中心点是元素的中心点（50% 50%）
          3.还可以给x y 设置像素或者方位名词（top bottom left right center）




    3.缩放：scale
      语法：
          transform:scale(x,y);
      注意：
          1.注意其中的x和y用逗号分隔
          2.transform:acale(1,1)：宽和高都放大一倍，相对于没有放大
          3.transform:acale(2,2)：宽和高都放大了2倍
          4.transform:acale(2)：只写了一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
          5.transform:acale(0.5,0.5)：缩小
          6.scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
      
   综合写法
      位移要放在最前面
      transform:translate(10px,10px) rotate(180deg) scale(1.2) ;



  动画animation
     制作动画使用步骤
     一.先定义动画
     二.在使用（调用）动画
    1.先定义动画-使用keyframes定义动画（类似定义类选择器）
       @keyframes 动画名称{
         0%{}
         100%{}
      }
    动画序列：
      1.0%是动画的开始，100%是动画的结束，这样的规则就是动画序列
      2.在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
      3.动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
      4.请用百分比来规定变化发生的时间，或用关键词"form"和"to"，等同于0%和100%

   二.在使用（调用）动画
      div{
        width:150px;
        height:150px;
        background-color: pink;    
        调用动画
        animation-name:动画名称;
        持续时间
        animation-auration:持续时间;       
       }  
       div{
        width:150px;
        height:150px;
        background-color: pink;
        /*动画名称   */
        animation-name:mycartoon; 
        /*持续时间*/
        animation-duration: 3s;   
        /*运动曲线 linear匀速*/
        animation-timing-function: ease-in-out;  
        /*何时开始(1秒后开始)*/
        animation-delay: 1s;
        /*重复次数 iteration重复的   conut 次数   infinite无限*/
        /*animation-iteration-count: infinite;*/
        /*是否反方向播放 默认normal  如果想要反方向就写alternate*/
        /*animation-direction:alternate; */
        /*动画结束后的状态，默认是backwards,回到起始状态，我们可以让他停留在结束状态forwards*/
        animation-fill-mode: forwards;
       }  
       div:hover{
        /*鼠标经过div让这个div停止动画，鼠标离开就继续动画 */
        animation-play-state:paused;
       }        

    animation简写
    animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者借结束状态  步数
    animation:mycartoon 3s     linear     0s    infinite alternate     forwards         steps() ;

    1.简写属性里面不包含animation-play-state
    2.暂停动画：animation-play-state:paused; 经常和鼠标经过等其他配合使用
    3.想要动画走回来，而不是直接跳回来animation-direction:alternate;
    4.盒子动画结束后，停在结束位置：animation-fill-mode: forwards;


  速度曲线
    animation-timing-function:规定动画的速度曲线，默认是ease
      值                             描述
    linear                      动画从头到尾的速度是相同的，匀速
    ease                        默认，动画以低速开始，然后加快，在结束前变慢
    ease-in                     动画以低速开始
    ease-out                    动画以低速结束
    ease-in-out                 动画以低速开始和结束
    steps()                     指定了时间函数中的时隔数量（步长）