<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. for xml path 按分类合并行数据

    ) as itemnum FROM ( SELECT Sonum, (SELECT ItemNum+',' FROM testtb    WHERE Sonum=A.Sonum    FOR XML  ...

  2. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  3. php中用大括号把?>和<?php框起来的作用

    <?php function my_function() { ?> My function was called <!--就是这里,为什么前面要用?>和< ?php 把M ...

  4. linq 初步认识

    linq to sql 类 介绍: linq如果不能用的话 重装一下vs就好了 LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言 ...

  5. JavaScipt——Windows.document对象

    四中选择器:class ,id , name , 标签 通过选择器获取对象: document.getElementById('');  -- id选择器 ...................... ...

  6. Spring IOC容器解析及实现原理

    最近一段时间,“容器”两个字一直萦绕在我的耳边,甚至是吃饭.睡觉的时候都在我脑子里蹦来蹦去的.随着这些天一次次的交流.讨论,对于容器的理解也逐渐加深.理论上的东西终归要落实到实践,今天就借助sprin ...

  7. Java的get请求-----接口测试

    package findyou.Interface; import java.net.HttpURLConnection; import java.net.URL; public class URLC ...

  8. Web性能权威指南 PDF扫描版​

    Web性能权威指南是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物.<Web性能权威指南>目标是涵盖Web开发者技术体系中应该掌握的所有网络及性能优化知识.全书 ...

  9. 分层最短路-2018南京网赛L

    大概题意: 题意:N个点,M条带权有向边,求将K条边权值变为0的情况下,从点1到点N的最短路. 拓展:可以改变K条边的权值为x 做法:把每个点拆成k个点,分别表示还能使用多少次机会,构造新图. 实际写 ...

  10. loj #2037. 「SHOI2015」脑洞治疗仪

    #2037. 「SHOI2015」脑洞治疗仪   题目描述 曾经发明了自动刷题机的发明家 SHTSC 又公开了他的新发明:脑洞治疗仪——一种可以治疗他因为发明而日益增大的脑洞的神秘装置. 为了简单起见 ...