animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画

animation-name属性为动画指定一个名称

animation-name兼容主流的浏览器，不过还是需要加前缀去兼容

animation-name有两个属性值，分别是keyframename和none

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    div{

        width:800px;

        height:800px;

        margin:0 auto;

    }

    .container{

        position: relative;

    }

    .inner, .middle, .outer, .pic{

        position: absolute;

        top:0;

        right:0;

        bottom:0;

        left:0;

        margin:auto;

    }

    .inner{

        background:url(source/circle_inner.png) center no-repeat;

        animation-name:circle_inner;

    }

    .middle{

        background:url(source/circle_middle.png) center no-repeat;

        animation-name:circle_middle;

    }

    .outer{

        background:url(source/circle_outer.png) center no-repeat;

        animation-name:circle_outer;

    }

    .pic{

        background:url(source/pic.png) center no-repeat;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="inner"></div>

        <div class="middle"></div>

        <div class="outer"></div>

        <div class="pic"></div>

    </div>

</body>

</html>

animation-duration 动画持续时间 默认是0

animation-timing-function 动画时间函数

animation-delay 动画延迟时间

animation-delay 属性定义动画什么时候开始，单位可以是秒（s）或毫秒（ms），允许负值，-2s使动画马上开始，但会跳过2s进入动画

animation-iteration-count 动画循环次数

animation-iteration-count: number | infinite  默认为1

animation-direction: normal | reverse | alternate | alternate-reverse 正常； 反向； 正反交替； 反正交替

alternate 和 alternate-reverse ，如果animation-itreation-count 不是设置成 infinite ，则只会执行一次就停止

animation-fill-mode 动画延迟未执行时，或者动画执行完毕后的停留状态（动画不能设置为循环，否则无法停止）

animation-fill-mode: none | forwards | backwards | both 无 结束状态 开始状态 看情况

animation-play-state: running | paused 动画运行状态：运行 | 暂停

animation 简写

animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode  play-state

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    div{

        width:800px;

        height:800px;

        margin:0 auto;

    }

    .container{

        position: relative;

        -webkit-transform-style:preserve-3d;

           -moz-transform-style:preserve-3d;

            -ms-transform-style:preserve-3d;

             -o-transform-style:preserve-3d;

                transform-style:preserve-3d;

    }

    .inner, .middle, .outer, .pic{

        position: absolute;

        top:0;

        right:0;

        bottom:0;

        left:0;

        margin:auto;

    }

    .container:hover div{

        -webkit-animation-play-state:paused;

           -moz-animation-play-state:paused;

            -ms-animation-play-state:paused;

             -o-animation-play-state:paused;

                animation-play-state:paused;

    }

    .inner{

        background:url(source/circle_inner.png) center no-repeat;

        /*循环*/

        -webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;

           -moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;

            -ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;

             -o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;

                animation:circle_inner 10s ease-in-out 1s infinite alternate running;

        /*不循环，填充效果*/

        /*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running;

           -moz-animation:circle_inner 10s ease-in-out 1s forwards running;

            -ms-animation:circle_inner 10s ease-in-out 1s forwards running;

             -o-animation:circle_inner 10s ease-in-out 1s forwards running;

                animation:circle_inner 10s ease-in-out 1s forwards running;*/

    }

    .middle{

        background:url(source/circle_middle.png) center no-repeat;

        -webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;

           -moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;

            -ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;

             -o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;

                animation:circle_middle 10s ease-in-out 1s infinite alternate running;

    }

    .outer{

        background:url(source/circle_outer.png) center no-repeat;

        -webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;

           -moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;

            -ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;

             -o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;

                animation:circle_outer 10s ease-in-out 1s infinite alternate running;

    }

    .pic{

        background:url(source/pic.png) center no-repeat;

    }

    @keyframes circle_inner{

        0%{ transform:rotateX(0deg); }

        50%{ transform:rotateX(90deg); }

        100%{ transform:rotateX(360deg); }

    }

    @keyframes circle_middle{

        0%{ transform:rotateY(0deg); }

        50%{ transform:rotateY(90deg); }

        100%{ transform:rotateY(360deg); }

    }

    @keyframes circle_outer{

        0%{ transform:rotateZ(0deg); }

        50%{ transform:rotateZ(90deg); }

        100%{ transform:rotateZ(360deg); }

    }

</style>

</head>

<body>

    <div class="container">

        <div class="inner"></div>

        <div class="middle"></div>

        <div class="outer"></div>

        <div class="pic"></div>

    </div>

</body>

</html>

动画性能优化：

用position-fixed代替background-attachment

带图片的元素放在伪元素中

will-change

兼容性IE13+ 感觉可以放弃了……

向下提示箭头效果

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    div{

        width:30px;

        height:30px;

        position: fixed;

        left:0;

        right:0;

        bottom:100px;

        margin:0 auto;

        cursor:pointer;

        -webkit-transform:rotate(90deg);

           -moz-transform:rotate(90deg);

            -ms-transform:rotate(90deg);

             -o-transform:rotate(90deg);

                transform:rotate(90deg);

        -webkit-animation:upDown 2s ease-in-out infinite;

          -moz-animation:upDown 2s ease-in-out infinite;

           -ms-animation:upDown 2s ease-in-out infinite;

            -o-animation:upDown 2s ease-in-out infinite;

               animation:upDown 2s ease-in-out infinite;

    }

    @-webkit-keyframes upDown{

        0%{ bottom:100px; }

        50%{ bottom:80px; }

        100%{ bottom:100px; }

    }

    @-moz-keyframes upDown{

        0%{ bottom:100px; }

        50%{ bottom:80px; }

        100%{ bottom:100px; }

    }

    @-ms-keyframes upDown{

        0%{ bottom:100px; }

        50%{ bottom:80px; }

        100%{ bottom:100px; }

    }

    @-o-keyframes upDown{

        0%{ bottom:100px; }

        50%{ bottom:80px; }

        100%{ bottom:100px; }

    }

    @keyframes upDown{

        0%{ bottom:100px; }

        50%{ bottom:80px; }

        100%{ bottom:100px; }

    }

</style>

</head>

<body>

    <div>></div>

</body>

</html>

css3使用animation属性实现炫酷效果的更多相关文章

  1. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  2. 仿网易/QQ空间视频列表滚动连播炫酷效果

    代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境 需要下载七牛的开源播放器SDK 本例子实现了仿网易/ ...

  3. 用AI制作炫酷效果

    PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...

  4. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  5. 基于skitter的轮播图炫酷效果，幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  6. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

  7. CSS3之animation属性

    CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度. 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调 ...

  8. 网页样式——各种炫酷效果持续更新ing...

    1.evanyou效果-彩带的实现,效果如下 注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下: /*Html代码:*/ <canvas id=">< ...

  9. 学习 CSS 之用 CSS 3D 实现炫酷效果

    一.前言 把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上. 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3 ...

随机推荐

  1. 从Libra看区块链的机遇

    一番码客 : 挖掘你关心的亮点.http://www.efonmark.com 关于未来的思考 记得去年扎克伯格搞Libra的时候,引起了世界的关注.但随着美国国会听证会的阻力,渐渐很少听见Libra ...

  2. 全卷积网络FCN

    全卷积网络FCN fcn是深度学习用于图像分割的鼻祖.后续的很多网络结构都是在此基础上演进而来. 图像分割即像素级别的分类. 语义分割的基本框架: 前端fcn(以及在此基础上的segnet,decon ...

  3. 免费丨十大IT热门学科在线直播体验课正式来袭，全免费！！！

    一场突如其来的疫情阻挡了人与人之间的接触,在这一系列困难面前,无数勇敢的人们挺身而出,千里驰援,默默承担,用行动践行责任与信念,希望与祖国和家人一道共渡难关. 传智播客作为一家致力于“高精尖”IT科技 ...

  4. AI: 如何用钢笔工具画曲线

    AI 可以用来绘制矢量图片. 点击钢笔工具,点击画图会画出直线,点击拖拉画图会画出曲线. 锚点的摆放位置在侧面而非顶端. 控制柄越长,图形越尖锐. 画圆时控制柄长度控制在两点之间1/3 长度. 使用的 ...

  5. tensorflow MNIST Convolutional Neural Network

    tensorflow MNIST Convolutional Neural Network MNIST CNN 包含的几个部分: Weight Initialization Convolution a ...

  6. 机器学习总结-LR（对数几率回归）

    LR(对数几率回归) 函数为\(y=f(x)=\frac{1}{1+e^{-(w^{T}x+b)}}\). 由于输出的是概率值\(p(y=1|x)=\frac{e^{w^{T}x+b}}{1+e^{w ...

  7. ARTS Week 14

    Jan 27, 2020 ~ Feb 2, 2020 Algorithm Problem 160.Intersection of Two Linked Lists(相交链表) 题目链接 题目描述:给定 ...

  8. Django ORM各种查询

    正向和反向查询 正向 ----> 关联字段在当前表中,从当前表向外查叫正向 反向 —> 关联字段不在当前表中,当当前表向外查叫反向 正向通过字段,反向通过表名查 表结构 from djan ...

  9. const与vector的搭配

    有三种组合方式,分别为: vector<const int> vec; const vector<int> vec; const vector<const int> ...

  10. 云服务器InfluxDB & Chronograf配置

    环境: 阿里云服务器 Ubuntu 18.04.3 LTS InfluxDB 1.7.10 (截至2020.2.20最新版) chonograf 1.8.0 (2020.2.19推出) 配置建议: 不 ...