zoukankan      html  css  js  c++  java
  • CSS3动画@keyframes基础

    动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面,我们将形成连续性画面的任意一张图片称为桢或动画帧,它是构成动画的最小单元,CSS 中专门提供了创建动画帧的属性,并以此为基础在网页中创建动画。

    @keyframes 是 CSS 中提供的专门用于定义动画关键帧的语法词

     <style>

    /* 关键帧序列 */

    @keyframes move {

    from { 200px; height: 100px; }

    to { 300px; height: 150px; }

    }

    </style>

    1. from 和 to 分别为动画的关键帧
    2. 允许使用百分比定义关键帧,from 相当于 0%to 相当于 100%
    3. 多个关键帧的组合叫做动画序列,每个序列都要有一个名称
    4. 关键帧中定义大部分普通的 CSS 样式

    @keyframes 用来定义动画序列,animation 属性用来为标签盒子引用动画序列,同一个动画序列可以被多个标签盒子引用。

    1、anmation-name:名字

    2、animation-duration :时长

    3、animation-delay:延时

    4、animation-fill-mode:结束状态

    • forwards 动画结束时,保持最后一帧的样式
    •  backwards 动画结整时,恢复标签盒子原本的样式,该值为默认值

    5、animation-timing-function:速度曲线

    • linear:匀速
    • ease:逐渐慢下来
    • ease-in:加速
    • ease-out:减速
    • ease-in-out:先加速后减速

    6、animation-iteration-count:重复执行

    • infinite :动画无限循环执行
    • 默认为 1 次认为 1 

    7、animation-direction:单独指定是否逆向执行

    8、animation-play-state:动画是否暂停

    • paused :动画暂停
    • running:动画继续

    animation:名字+时长+延时+结束状态+速度曲线+重复执行

  • 相关阅读:
    sql语句
    数据结构
    Collection接口
    【学习笔记】〖九度OJ〗题目1443:Tr A
    【学习笔记】〖九度OJ〗题目1104:整除问题
    【学习笔记】〖九度OJ〗题目1138:进制转换
    【学习笔记】〖九度OJ〗题目1326:Waiting in Line
    【学习笔记】〖九度OJ〗题目1437:To Fill or Not to Fill
    【学习笔记】〖九度OJ〗题目1153:括号匹配问题
    【学习笔记】〖九度OJ〗题目1161:Repeater
  • 原文地址:https://www.cnblogs.com/shixiaokeng/p/13751874.html
Copyright © 2011-2022 走看看