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. Springboot | Failed to execute goal org.springframework.boot:spring-boot-maven-plugin

    案例 今天搭建spring boot 环境时,使用mvn install ,出现Failed to execute goal org.springframework.boot:spring-boot- ...

  2. python人脸识别

    需要掌握知识python,opencv和机器学习一类的基础 过一段时间代码上传github,本人菜j一个,虽然是我自己谢的,也有好多不懂,或者我这就是错误方向 链接:https://pan.baidu ...

  3. mysql+jpa简单实现步骤

    首先,我们用的开发工具是IDEA,数据库是mysql,以下是步骤: 1.我们需要在pom.xml加入mysql和jpa的依赖 <!-- 依赖的数据库,使用jpa --> <depen ...

  4. MyBatis基础_连接池与事务、动态SQL、注解开发

    一.MyBatis连接池及事务控制 1.连接池 在实际开发中,都会使用连接池,因为它可以减少获取连接缩消耗的时间.所谓连接池,就是存储数据库连接的容器.连接池中存储一定数量的数据库连接,当线程需要使用 ...

  5. 机器学习总结-sklearn参数解释

    本文转自:lytforgood 机器学习总结-sklearn参数解释 实验数据集选取: 1分类数据选取 load_iris 鸢尾花数据集 from sklearn.datasets import lo ...

  6. Comet OJ Contest #0 解方程(暴力)

    题意: 给定自然数n,求满足$\displaystyle \sqrt{x-\sqrt{n}}=\sqrt{z}-\sqrt{y}$的x,y,z,输出解的个数以及所有解 xyz的和 n<=1e9, ...

  7. 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法

    1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...

  8. Jmeter——使用JSR223元件实现RSA登录加密

    一.RSA加密简介 RSA加密是一种非对称加密.可以在不直接传递密钥的情况下,完成解密.这能够确保信息的安全性,避免了直接传递密钥所造成的被破解的风险.是由一对密钥来进行加解密的过程,分别称为公钥和私 ...

  9. OsgEearh 中的 FeatureEditor的实现原理

    先来看看FeatureEditor的用法: const osgEarth::SpatialReference* mapSRS = mapNode->getMapSRS(); osgEarth:: ...

  10. java中深拷贝浅拷贝简析

    Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...