css动画的基本使用方法

提问:animation动画与transform属性的区别

回答:比起transform需要手动触发,animation动画是自动播放的,并且可控,可循环播放,功能更加强大

接下来看一下动画实现的步骤:

第一步定义动画

    /* 方法一 */

    @keyframes  动画名{

         from{}

         to{}
    }

    /* 方法二*/

    @keyframes  动画名{

        0%{
          }
        50%{
          }
        100%{
          }
    }

    /* 例子 */
    @keyframes font {
      45%{
        transform: rotate(360deg) scale(3.5) 
      }
      80%{
        transform:  scale(2.7);
      }
      90%{
        transform:  scale(1.6);
      }
      100%{
        transform: scale(1.5);
      }
    }

注意:方法二中是%到100%都是可以定义的,在这里我只演示了三个值。如果动画开始时没有明显的变化,则0%和from{}可以省略不写。

第二步:调用动画

/* 语法提示 */ 
animation: name duration timing-function delay iteration-count direction fill-mode;

/* 举例*/
    .font{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      animation: font 1s  linear ;
    }

在css属性中,通过animation这个属性来调用动画

语法结构: animation:动画名称(必写)  动画时长(必写)  速度曲线   延迟时间   重复次数   动画方向   执行完毕时的状态

注意:取值不分先后顺序,如果有两个时间值,那么第一个时间表示动画时长,第二个时间表示动画播放的延迟时间

提醒:要想让运动的动画鼠标经过时停止,需要在运动的元素的选择器的hover伪类选择器里设置 animation-play-state: paused; 

 代码展示:




  
  
  
  动画
  
  
  


  

简单动画

效果展示: 

css动画的基本使用方法_第1张图片 一个简单的动画效果

目前用到的动画属性值
类别  属性值 作用
曲线速率 linear 匀速线性运动
曲线速率 steps(数字) 逐帧动画(一般配合精灵图使用)
曲线速率 ease-in-out 慢速开始和结束
动画次数 number 定义运动的次数,默认是一次
动画次数 infinite 无限运动(反复横跳 不是)
动画方向 alternate 逆向运动(运动次数需要大于1才能看出效果)
动画终点 none(默认值) 默认终点是原点
动画终点 forwards 在运动结束的之后,停到结束位

以上内容,是自己在学习中总结出来的,有啥错误和补充欢迎在评论区留言~

你可能感兴趣的:(前端_css效果,动画,css,css3)