<html>

<style>

@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

.fade-in{

    animation-name: fadeIn;

    animation-timing-function: ease;

    animation-direction: normal;

    animation-play-state: running;

    -webkit-animation-name: fadeIn;

    -webkit-animation-timing-function: ease;

    -webkit-animation-direction: normal;

    -webkit-animation-play-state: running;

}

.icon-arrow{

    display: block;

    position: absolute;

    left: 50%;

    width: 40px;

    height: 40px;

    margin-left: -20px;

    background: url("http://www.lewanau.com/public/weixin/css/img/icon-arrow.png") no-repeat left center;

    -webkit-animation: arrow-ani 1s linear infinite;

    -o-animation: arrow-ani 1s linear infinite;

    animation: arrow-ani 1s linear infinite;

}

@-o-keyframes arrow-ani {

    from{

        bottom:4%;

        opacity: 1;

    }

    to{

        bottom:6%;

        opacity: 0;

    }

}

@-webkit-keyframes arrow-ani {

    from{

        bottom:4%;

        opacity: 1;

    }

    to{

        bottom:6%;

        opacity: 0;

    }

}

@keyframes arrow-ani {

    from{

        bottom:4%;

        opacity: 1;

    }

    to{

        bottom:6%;

        opacity: 0;

    }

}

</style>

<body style="background:#666">

	<div class="animation fade-in" >

		<span class="icon-arrow"></span>

	</div>

</body>

</html>

css animation fade in的更多相关文章

  1. CSS魔法堂：更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

  2. CSS Animation triggers text rendering change in Safari

    薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...

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

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

  4. [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

    We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...

  5. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

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

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

  7. css animation @keyframes 动画

    需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

  8. Apple CSS Animation All In One

    Apple CSS Animation All In One Apple Watch CSS Animation https://codepen.io/xgqfrms/pen/LYZaNMb See ...

  9. css animation & animationend event & onanimationend

    css animation & animationend event & onanimationend https://developer.mozilla.org/en-US/docs ...

随机推荐

  1. JVM实用参数（一）JVM类型以及编译器模式

    JVM实用参数(一)JVM类型以及编译器模式 原文地址:https://blog.codecentric.de/en/2012/07/useful-jvm-flags-part-1-jvm-types ...

  2. 第3章 springboot接口返回json 3-2 Jackson的基本演绎法

    @JsonIgnore private String password; @JsonFormat(pattern="yyyy-MM-dd hh:mm:ss a",locale=&q ...

  3. 95E Lucky Country

    传送门 题目大意 如果一个数中不包含除4和7之外的数字则是幸运数.有n个岛屿,通过双向道路连接.这些岛屿被分为几个地区.每个岛属于恰好一个区域,同一区域中的任何两个岛之间存在道路,不同区域的任何两个岛 ...

  4. Entity Framework Tutorial Basics（21）：CRUD Operation in Connected Scenario

    CRUD Operation in Connected Scenario: CRUD operation in connected scenario is a fairly easy task bec ...

  5. 深、浅copy

    深.浅copy多用于列表 浅copy:第一层中不变的数据是独立的,可变类型元素指向同一块内存地址 l1 = [1,2,3,["a","b"]] l2 = l1. ...

  6. 关于 windows mobile 进程操作的方法

    #region Process class /// <summary> /// Summary description for Process. /// </summary> ...

  7. C++面试笔记--面向对象

    说到面向对象,大家第一反应应该就是它的三大特性:封装性.继承性和多态性.那么我们先简单的了解一下这三大特性: (1)封装性:封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的 ...

  8. Centos7安装配置JDK8

    Centos7安装配置JDK8 一.准备工作 第一步,去甲骨文官网下载Jdk相应的版本,我这里下载的是jdk1.8. 第二步将你从官网上下载下来的jdk使用FTP工具上传到云服务器上的相应目录,我的是 ...

  9. Binder学习笔记（十二）—— binder_transaction(...)都干了什么？

    binder_open(...)都干了什么? 在回答binder_transaction(...)之前,还有一些基础设施要去探究,比如binder_open(...),binder_mmap(...) ...

  10. 常用SQL语句及在node中使用MySQL

    摘要:一些重要的SQL命令 SELECT - 从数据库中提取数据 UPDATE - 更新数据库中的数据 DELETE - 从数据库中删除数据 INSERT INTO - 向数据库中插入新数据 CREA ...