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. jQuery初学者笔记 一

    jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取的元素进行操作 基础语法: 所有jQuery语句用"$"符号 ...

  2. https搭建(自签名证书)

    博客搬家: https搭建(自签名证书) 上一篇博客探究了https(ssl)的原理,为了贯彻理论落实于实践的宗旨,本文将记录我搭建https的实操流程,使用Apache2+ubuntu+openss ...

  3. CCF_201503-2_数字排序

    自己写个排序的cmp. #include<iostream> #include<cstdio> #include<algorithm> using namespac ...

  4. Codeforces_496_E_贪心

    http://codeforces.com/problemset/problem/496/E 这好像叫序列混合贪心,简单地讲,用歌去匹配最符合条件的人.用了multiset,重载了<,加快寻找最 ...

  5. Linux密码策略--设置随机密码

    #!/bin/bash # @Author: HanWei # @Date: -- :: # @Last Modified by: HanWei # @Last Modified -- :: # @E ...

  6. ASP.NET Core 2.2 WebApi 系列【九】使用SignalR (作者:tenghao510 ) 学习及内容补充

    原文地址:  ASP.NET Core 2.2 WebApi 系列[九]使用SignalR 今天,看到了大牛的这篇博文,  发了一下评论, 我很惊喜, 没想到他很快就回复了我,  而且通过QQ帮助了S ...

  7. 【LaTeX】记录一下LaTeX的安装和使用

    由于排版论文的需要,了解了一些LaTeX的相关内容,下面简单记录关于LaTeX的安装和使用 维基百科: LaTeX(/ˈlɑːtɛx/,常被读作/ˈlɑːtɛk/或/ˈleɪtɛk/),文字形式写作L ...

  8. JAVA 对守护线程的理解

    1.在start之前,setDaemon. 该现场就成为守护线程了. 2.守护现线程并不是主线程结束,子线程(守护线程)也跟着结束.而是守护线程在没有用户线程运行的情况伴随着JVM退出而结束. 示例代 ...

  9. 【学习底层原理系列】重读spring源码1-建立基本的认知模型

    开篇闲扯 在工作中,相信很多人都有这种体会,与其修改别人代码,宁愿自己重写. 为什么? 先说为什么愿意自己写: 从0-1的过程,是建立在自己已有认知基础上,去用自己熟悉的方式构建一件作品.也就是说, ...

  10. SpringBoot图文教程5—SpringBoot 中使用Aop

    有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...