zoukankan      html  css  js  c++  java
  • CSS总结

    自定义动画

    1、animation-name(动画名称):
    元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
    语法:
    animation-name :none | <identifier>

    例:
    div{
    -webkit-animation-name : FromLeftToRight;
    animation-name : FromLeftToRight;

    2. keyframes (关键帧):
    被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
    语法:
    @keyframes <identifier> {
    [ from | to | <percentage> ]{ sRules } ] [,*]
    }

    例1:@keyframes FromLeftToRight{ 

    from {left: 0; }

    to {left: 800px; } 

    }

    例2:

    HTML:<div class="box"></div>

    CSS:

    .box {
    100px;
    height: 100px;
    background: #5CBE3E;
    margin: 5px;
    animation-name: fromLeftToRight;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    }

    .box:hover {
    animation-play-state: paused;
    }

     @keyframes fromLeftToRight {
         from {
         margin-left: 0;
                 }
           to {
         margin-left: 300px;
               }
    }

    3、animation-duration(动画时间)

    设置对象动画的持续时间

    语法:

    animation-duration:<time>

    例:

    div{

          -webkit-animation-duration:1s;

                      animation-duration:1s

    }

    4、设置对象动画的过渡速度类型

    语法:

    animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

    例:

    div{

          -webkit-animation-timing-function : ease-in;

           animation-timing-function : ease-in;

    }

    5. animation-delay(动画延迟时间):

    语法:

    animation-delay:<time>

    例:

    div{

          -webkit-animation-delay : 1s;

          animation-delay : ease-in;

    }

    6. animation-iteration-count(动画执行次数):

    设置对象动画的延迟时间

    语法:

    animation-iteration-count:infinite | <number>

    infinite表示无限次数

    例:

    div{

          -webkit-animation-iteration-count : 2;

          animation-iteration-count : 2;

    }

  • 相关阅读:
    剑指Offer:面试题17——合并两个排序的链表
    剑指Offer:面试题16——反转链表(java实现)
    剑指Offer:面试题15——链表中倒数第k个结点(java实现)
    Timer和TimerTask 定时器和定时任务
    Spring-WebSocket 教程
    单点登录原理与简单实现
    Python机器学习:泰坦尼克号获救预测一
    转 smarty学习笔记电子版整理
    转 nodejs socket.io初探
    html5新增的属性和废除的属性
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5775912.html
Copyright © 2011-2022 走看看