zoukankan      html  css  js  c++  java
  • css3 动画

    语法

    @keyframes animationname {keyframes-selector {css-styles;}}
    描述
    animationname 必需。定义动画的名称。
    keyframes-selector

    必需。动画时长的百分比。

    合法的值:

    • 0-100%
    • from(与 0% 相同)
    • to(与 100% 相同)
    css-styles 必需。一个或多个合法的 CSS 样式属性。

    from(0%)-to(100%)的用法:

    .modal-content, #caption {
         -webkit-animation-name: zoom;
         -webkit-animation-duration: 0.6s;
         animation-name: zoom;
         animation-duration: 0.6s;
    }

    @-webkit-keyframes zoom {
         from {-webkit-transform: scale(0)}
         to {-webkit-transform: scale(1)}
    }

    @keyframes zoom {
         from {transform: scale(0.1)}
         to {transform: scale(1)}
    }

    2.百分比 值段的用法:

    @keyframes mymove
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }
    
    @-moz-keyframes mymove /* Firefox */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }
    
    @-webkit-keyframes mymove /* Safari 和 Chrome */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }
    
    @-o-keyframes mymove /* Opera */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }
  • 相关阅读:
    微信小程序退款【证书的使用】
    生成随机位数的UUID
    弹出层-layui
    load加载层-layui
    form-layui
    table-layui
    下拉列表模仿placeholder效果
    .net core 2.0 Unable to convert MySQL date/time to System.DateTime
    .net core Include问题
    .net core 2.0 配置Session
  • 原文地址:https://www.cnblogs.com/maochunyan/p/6829594.html
Copyright © 2011-2022 走看看