/*淡入*/
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    /*初始状态 透明度为0*/
    40% {
        opacity: 0;
    }
    /*过渡状态 透明度为0*/
    100% {
        opacity: 1;
    }
    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in {
    /*针对webkit内核*/
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.wrapper {
    animation: fade-in; /*动画名称*/
    animation-duration: 4.5s; /*动画持续时间*/
    -webkit-animation: fade-in 1.5s; /*针对webkit内核*/
}

/*由中间到两边*/
.center-spread {
    animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
}

@keyframes center-spread-keyframes {
    0% {
        opacity: 0;
        transform: rotateY(70deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        offset: 1
    }
}

@-webkit-keyframes center-spread-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: rotateY(70deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: rotateY(0deg);
        -webkit-offset: 1
    }
}

@-moz-keyframes center-spread-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: rotateY(70deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: rotateY(0deg);
        -moz-offset: 1
    }
}

@-o-keyframes center-spread-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: rotateY(70deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: rotateY(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes center-spread-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: rotateY(70deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: rotateY(0deg);
        -ms-offset: 1
    }
}

/*由上到下并且延迟出现*/
.up-enter1 {
    animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -moz-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -webkit-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -o-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
}

.up-enter2 {
    animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -moz-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -webkit-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -o-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
}

@keyframes up-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateY(-300%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        offset: 1
    }
}

@-moz-keyframes up-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateY(-300%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateY(0);
        -moz-offset: 1
    }
}

@-webkit-keyframes up-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateY(-300%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateY(0);
        -webkit-offset: 1
    }
}

@-o-keyframes up-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateY(-300%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateY(0);
        -o-offset: 1
    }
}

@-ms-keyframes up-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateY(-300%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateY(0);
        -ms-offset: 1
    }
}

/*反转出现*/
.reverse-enter {
    animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
}

/*一直反转*/
.reverse-infinite {
    animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
    -moz-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
    -webkit-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
    -o-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
}

@keyframes reverse-enter-keyframes {
    0% {
        opacity: 0.1;
        transform: rotateY(200deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        offset: 1
    }
}

@-moz-keyframes reverse-enter-keyframes {
    0% {
        -moz-opacity: 0.1;
        -moz-transform: rotateY(200deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: rotateY(0deg);
        -moz-offset: 1
    }
}

@-webkit-keyframes reverse-enter-keyframes {
    0% {
        -webkit-opacity: 0.1;
        -webkit-transform: rotateY(200deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: rotateY(0deg);
        -webkit-offset: 1
    }
}

@-o-keyframes reverse-enter-keyframes {
    0% {
        -o-opacity: 0.1;
        -o-transform: rotateY(200deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: rotateY(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes reverse-enter-keyframes {
    0% {
        -ms-opacity: 0.1;
        -ms-transform: rotateY(200deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: rotateY(0deg);
        -ms-offset: 1
    }
}

/*由下往上出现*/
.down-enter1 {
    animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
}

.down-enter2 {
    animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
}

.down-enter3 {
    animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
}

.down-enter4 {
    animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
}

@keyframes down-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateY(300%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
        offset: 1
    }
}

@-moz-keyframes down-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateY(300%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateY(0%);
        -moz-offset: 1
    }
}

@-webkit-keyframes down-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateY(300%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateY(0%);
        -webkit-offset: 1
    }
}

@-o-keyframes down-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateY(300%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateY(0%);
        -o-offset: 1
    }
}

@-ms-keyframes down-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateY(300%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateY(0%);
        -ms-offset: 1
    }
}

/*倾斜*/
.skew {
    animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
    -moz-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
    -webkit-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
    -o-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
}

@keyframes skew-spread-keyframes {
    0% {
        opacity: 0;
        transform: skewX(70deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: skewX(0deg);
        offset: 1
    }
}

@-webkit-keyframes skew-spread-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: skewX(70deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: skewX(0deg);
        -webkit-offset: 1
    }
}

@-moz-keyframes skew-spread-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: skewX(70deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: skewX(0deg);
        -moz-offset: 1
    }
}

@-o-keyframes skew-spread-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: skewX(70deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: skewX(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes skew-spread-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: skewX(70deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: skewX(0deg);
        -ms-offset: 1
    }
}

/*旋转*/
.rotate {
    animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
    -moz-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
    -webkit-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
    -o-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
}

@keyframes rotate-spread-keyframes {
    0% {
        opacity: 0;
        transform: rotateY(70deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        offset: 1
    }
}

@-webkit-keyframes rotate-spread-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: rotateY(70deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: rotateY(0deg);
        -webkit-offset: 1
    }
}

@-moz-keyframes rotate-spread-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: rotateY(70deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: rotateY(0deg);
        -moz-offset: 1
    }
}

@-o-keyframes rotate-spread-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: rotateY(70deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: rotateY(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes rotate-spread-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: rotateY(70deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: rotateY(0deg);
        -ms-offset: 1
    }
}

/*位移*/
/*左边进入*/
.translateLeft {
    animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
}

@keyframes left-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
        offset: 1
    }
}

@-moz-keyframes left-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateX(-100%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateX(0%);
        -moz-offset: 1
    }
}

@-webkit-keyframes left-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateX(-100%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateX(0%);
        -webkit-offset: 1
    }
}

@-o-keyframes left-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateX(-100%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateX(0%);
        -o-offset: 1
    }
}

@-ms-keyframes left-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateX(-100%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateX(0%);
        -ms-offset: 1
    }
}

/*右边进入*/
.translateRight {
    animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
}

@keyframes right-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateX(100%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
        offset: 1
    }
}

@-moz-keyframes right-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateX(100%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateX(0%);
        -moz-offset: 1
    }
}

@-webkit-keyframes right-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateX(100%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateX(0%);
        -webkit-offset: 1
    }
}

@-o-keyframes right-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateX(100%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateX(0%);
        -o-offset: 1
    }
}

@-ms-keyframes right-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateX(100%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateX(0%);
        -ms-offset: 1
    }
}

/*左右摆动*/
@keyframes mylogo {
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

@-moz-keyframes mylogo /* Firefox */
{
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

@-webkit-keyframes mylogo /* Safari 和 Chrome */
{
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

@-o-keyframes mylogo /* Opera */
{
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

.imagelogo {
    background: url(images/logo.png) no-repeat;
    float: left;
    position:relative;
    width: 180px;
    height: 60px;
    margin: 15px 0px 0px 0px;
    padding: 0px;
    cursor: pointer;
    animation: mylogo 1s linear 0s infinite alternate;
    /* Firefox: */
    -moz-animation: mylogo 1s linear 0s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: mylogo 1s linear 0s infinite alternate;
    /* Opera: */
    -o-animation: mylogo 1s linear 0s infinite alternate;
}
/*由大变小*/
.avatar{
    display: block;
    width:100%;
    animation: avatar 2000ms ease 0ms 1 forwards;
    -moz-animation:avatar 2000ms ease 0ms 1 forwards;
    -webkit-animation:avatar 2000ms ease 0ms 1 forwards;
    -o-animation:avatar 2000ms ease 0ms 1 forwards;
}
@-webkit-keyframes avatar {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: scale(1.3)
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes avatar {
    0% {
        -moz-opacity: 0;
        -moz-transform: scale(1.3)
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: scale(1)
    }
}
@-ms-keyframes avatar {
    0% {
        -ms-opacity: 0;
        -ms-transform: scale(1.3)
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: scale(1)
    }
}
@-o-keyframes avatar {
    0% {
        -o-opacity: 0;
        -o-transform: scale(1.3)
    }
    100% {
        -o-opacity: 1;
        -o-transform: scale(1)
    }
}
@keyframes avatar {
    0% {
        opacity: 0;
        transform: scale(1.3)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

css的各种动画的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  4. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  5. 简单的CSS圆形缩放动画

    简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...

  6. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  9. 简单CSS实现闪烁动画（+1白话讲解）

    原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...

  10. CSS 加载动画

    CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...

随机推荐

  1. gat和post封装代码

    from urllib import request, parsefrom urllib.error import HTTPError, URLError def get(url, headers=N ...

  2. Python turtle安装和使用教程

    1 安装turtle Python2安装命令: pip install turtule Python3安装命令: pip3 install turtle 因为turtle库主要是在Python2中使用 ...

  3. myBatis简学

    mybatis使用: ①拷贝相关mybits ②编写对象关系映射,一般都是实体类名+Mapper.xml的格式 ③编写mybits配置文件: a)配置环境 b)配置映射文件地址 ④编写对象操作方法: ...

  4. Python 随笔-1

    python的发展史: python 2.7            July 3,2010  目前业内主流使用的工业版本 主讲3.0 32bit = 内存的最大寻址空间为2*32    4G的空间 6 ...

  5. Ubuntu16.04 ionic(jdk,sdk,gradle)环境搭建完全攻略

    在Ubuntu16.04当中搭建一个ionic环境还是按照官方教程的来,主要问题是首先要把JDK,SDK搭好,环境变量配好.本文中给的包的下载请不要直接用浏览器下载,很慢,尽量用wget 下载,重要的 ...

  6. mp4文件解析(纯c解析代码)

     参考链接:1. mp4文件格式解析 https://www.cnblogs.com/ranson7zop/p/7889272.html   2. MP4文件格式分析及分割实现(附源码) https: ...

  7. HTML网页音频控制

    // 音频播放function playSound(url) { var borswer = window.navigator.userAgent.toLowerCase(); var audio; ...

  8. maven快速自动更新子模块项目的版本号

    当一个版本发布,新起一个版本时,我们需要更改一下项目中的版本号.一个maven工程,如果只是一个单一的主项目,那么只要手动修改一下 pom.xml 就 可以了,耗不了多少时间.但是如果这个maven项 ...

  9. json格式字符串用Uncaught SyntaxError: Unexpected token ' Uncaught SyntaxError: Unexpected number

    Unexpected number(index)的错误用的json字符串如 var jsonStr = "{1:'北京note备注信息',2:'上海note备注信息',3:'广东note备注 ...

  10. 微信机器人 返现机器人 pc版本 移动版本 java开发 小范省钱

    微信机器人 返现机器人 pc版本 移动版本 java开发 小范省钱 微信搜索微信号 fanli-x 或 扫描下方二维码,可查看效果. 非web版微信,pc/移动版微信 支持新号24小时 不封号! 有任 ...