动画效果(兼容各个浏览器)

.destination1  .current{

        display:block;

        animation:danru 2s linear infinite;

        -webkit-animation:danru 2s linear alternate ;

        -moz-animation:danru 2s linear alternate ;

        -o-animation:danru 2s linear alternate ;

        -ms-animation:danru 2s linear alternate ;

    }
@keyframes danru{

        0%   {opacity:0.00;left:0px;   top:0px;}

        25%  {opacity:0.25;left:50px;  top:0px;}

        50%  {opacity:0.50;left:100px; top:0px;}

        75%  {opacity:0.75;left:150px; top:0px;}

        100% {opacity:1.0; left:200px; top:0px;}

    }
@-webkit-keyframes danru{

        0%   {opacity:0.00;left:0px;   top:0px;}

        25%  {opacity:0.25;left:50px;  top:0px;}

        50%  {opacity:0.50;left:100px; top:0px;}

        75%  {opacity:0.75;left:150px; top:0px;}

        100% {opacity:1.0; left:200px; top:0px;}

    }

    @-moz-keyframes danru{

        0%   {opacity:0.00;left:0px;   top:0px;}

        25%  {opacity:0.25;left:50px;  top:0px;}

        50%  {opacity:0.50;left:100px; top:0px;}

        75%  {opacity:0.75;left:150px; top:0px;}

        100% {opacity:1.0; left:200px; top:0px;}

    }

    @-o-keyframes danru{

        0%   {opacity:0.00;left:0px;   top:0px;}

        25%  {opacity:0.25;left:50px;  top:0px;}

        50%  {opacity:0.50;left:100px; top:0px;}

        75%  {opacity:0.75;left:150px; top:0px;}

        100% {opacity:1.0; left:200px; top:0px;}

    }

    @-ms-keyframes danru{

        0%   {opacity:0.00;left:0px;   top:0px;}

        25%  {opacity:0.25;left:50px;  top:0px;}

        50%  {opacity:0.50;left:100px; top:0px;}

        75%  {opacity:0.75;left:150px; top:0px;}

        100% {opacity:1.0; left:200px; top:0px;}

    }

动画效果(兼容各个浏览器),布布扣,bubuko.com

时间： 2024-08-02 06:55:28

动画效果(兼容各个浏览器)的相关文章

动画渐变兼容各个浏览器

.destination1 .current{ display:block; animation:danru 2s linear infinite;-webkit-animation:danru 2s linear alternate ;-moz-animation:danru 2s linear alternate ;-o-animation:danru 2s linear alternate ; } @keyframes danru{ 0% {opacity:0.00;left:0px; t

CSSJS弹出层效果,兼容所有浏览器

直接上DEMO,不过IE中会提示加载ActiveX控件! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"

兼容各种浏览器的文字循环无缝滚动效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>中国站长天空-网页特效-文

兼容各个浏览器的未知高度div垂直居中效果

兼容各个浏览器的未知高度div垂直居中效果:让div垂直居中与它的父对象中,并不像是让div在父元素中水平居中那么简单,只要简单的为此元素设置margin:0px auto即可,虽然将一些属性配合使用也可以将div垂直居中与父元素中,但是在某些浏览器中并不兼容,下面就介绍一种兼容各大浏览器的方式.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

纯CSS3制作卡通场景汽车动画效果

前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越来越多.今天这个分享是PC端的案例,因为我做的是大场景来的,起因还是我无意间看到一张卡通图片.于是我突发灵感,就趁热打铁使用CSS3动画把它按照自己的想法实现了出来.接下来,就让我们一起进入这个好玩的分享吧! 预览学习一个案例要有热情,就应该先看一下案例的效果,所以,下图为我录的gif图片,大家先

CSS3使用Animation为同一个元素添加多个动画效果

本篇文章由:http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/ CSS3 Animation 并未提供给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑落,当滑落到指定位置时开始闪烁这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)

10款web前端动感的图片动画效果

1.Salvattore:CSS 驱动的 jQuery Masonry 插件 Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单地添加一个 data-columns 属性.在你的 CSS 文件中,你可以设置你想为元素创建的列数.要创建一个具有响应性的柱状设计,只需使用媒体查询.项目附加在同一容器的前面,不会发生冲突.您可以结合 XHR 功能的 AP

用css3和canvas实现的蜂窝动画效果

近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要说的是蜂窝效果.详细效果大家等下能够执行源代码.这里就不放gif图了. css3的原理非常easy,就是通过更改background-size,因为css3中的background中能够设置repeat属性,来使背景图片在x,y方向平铺.一開始先设置background-size:10%, 10%,

一步一步学习 JQuery (八) JQuery 的动画效果

常用方法 hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css("display", "none"); show(): 将元素的 display 样式改为先前的显示状态. 以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来. 以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度. fadeIn(),