封装:

/**
* animation
*/
.keyframes (@prefix,@name,@content) when (@prefix=def) {
@keyframes @name {
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
@-moz-keyframes @name {
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
@-o-keyframes @name {
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
@-webkit-keyframes @name{
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
.keyframes(moz,@name,@content);
.keyframes(o,@name,@content);
.keyframes(webkit,@name,@content);
.keyframes(def,@name,@content);
}

自定义动画:

.keyframes(all,zindexName,{
from{z-index :;}
to{z-index: -}
});

调用:

-webkit-animation: zindexName 0.6s linear .1s ;

https://www.jianshu.com/p/b19682ba87e2

less 语法

https://www.cnblogs.com/feng-wu/p/6040387.html

Less 创建css3动画@keyframes函数的更多相关文章

  1. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  2. 16款创建CSS3动画的jQuery插件

    jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...

  3. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  4. CSS3 动画 @keyframes

    通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 以及 JavaScript. 如下动画,常用于手机端,提示用户往下拖动的渐隐渐出效果. Demo 关键CSS代码 1. 给 ...

  5. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

  6. css3动画@keyframes示例

    .active { animation: chuiziza 0.5s ease 1 forwards; } .feijindan { display: block; animation: fei 2s ...

  7. CSS3学习(CSS3过渡、CSS3动画)

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  8. 【Demo】CSS3 动画

    CSS3 动画(@keyframes,animation) CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则. @keyframes规则是创建动画. @ ...

  9. CSS3动画(重要)

    CSS3 动画 CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyfr ...

随机推荐

  1. linux中$#,$0,$1,$2,$@,$*,$$,$?的含义

    $# 是传给脚本的参数个数$0 是脚本本身的文件名$1 是脚本后接的第一个参数$2 是脚本后接的第二个参数$@ 是传给脚本的所有参数列表,"$1" "$2" & ...

  2. 【HDU3595】GG and MM(博弈论)

    [HDU3595]GG and MM(博弈论) 题面 HDU 一个游戏由多个游戏组成,每次每个操作者必须操作所有可以操作的游戏,操作集合为空者输. 每个游戏由两堆石子组成,每次可以从较多的那一堆中取走 ...

  3. rt-thread之stm32系列BSP制作方法

    @2019-01-24 [小记] bsp制作方法: 官网下载 rt-thread 源码,将路径 bsp/stm32/libraries/templates/ 下的模板文件,Copy至路径 bsp/st ...

  4. 【转】SEGGER Embedded Studio 新建stm32f103工程

    @2018-12-22 SEGGER Embedded Studio 新建stm32f103工程

  5. html概述和基本结构

    html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签 ...

  6. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  7. CF527E Data Center Drama(构造+欧拉回路)

    题目链接 大意: 给你一个无向图. 要求加最少的边,然后给这些无向图的边定向,使得每一个点的出入度都是偶数. 输出定向后的边数和边集. n<=10^5 m<=2*10^5 很巧妙的构造题- ...

  8. Spring Cloud下基于OAUTH2认证授权的实现

    GitHub(spring -boot 2.0.0):https://github.com/bigben0123/uaa-zuul 示例(spring -boot 2.0.0): https://gi ...

  9. js 获取 url 参数

    /** * 根据页面地址获取所有参数对象 * @return Object{} 返回所有参数 * ------------------------------ * 根据页面地址获取指定参数对象 * @ ...

  10. Django 项目内利用ORM直接运行脚本读库

    #导包 import os import sys #将脚本所在工程添加到环境变量 #绝对路径 # sys.path.append('c:/Users/nxy/www/mymac') #相对路径 sys ...