css动画走马灯5秒,css3 transition 和 animation实现走马灯

这段时间在做一个App，H5的开发。页面上有公告 以走马灯的形式显示出来。

在开始直接用的marquee标签，后来发现在ios客户端，走马灯移动不够平滑，有抖动现象。

对于有强迫症的我而言是无法忍受的，后来就用js来写，发现andriod和ios客户端 的走马灯移动都不平滑，会抖动。

后来想到了可以用css3的transition和animation来写，分享一下代码！

transition写法

marquee

body{

padding: 0;

margin: 0;

}

#demo{

width: 100%;

height: 50px;

background: #eee;

position: fixed;

}

#demo>#spa{

word-break:keep-all;

white-space:nowrap;

position: absolute;

left: 100%;

font-size: 30px;

line-height: 50px;

}

走马灯效果

var spa = document.getElementById("spa");

var spaw = spa.offsetWidth;

var bodyw = document.body.clientWidth;

var w = 0-(spaw+bodyw);

spa.style.transform = 'translate(' + w + 'px, 0px)';

spa.style.transition = 'transform 5s linear';

window.setInterval(function(){

spa.style.transform = 'translate(0px, 0px)';

spa.style.transition = 'transform 0s linear';

window.setTimeout(function(){

spa.style.transform = 'translate(' + w + 'px, 0px)';

spa.style.transition = 'transform 5s linear';

},100)

},5000)

注意的是在iphone4s 上 ，transition属性建议分开写，直接写transition上设置四个属性的话，ihone4s的浏览器不能识别。

animation写法

marquee

#demo{

width: 100%;

height: 50px;

background: #eee;

position: fixed;

}

#demo>span{

word-break:keep-all;

white-space:nowrap;

position: absolute;

left: 100%;

font-size: 30px;

line-height: 50px;

}

#demo>.a{

-webkit-animation:demo 5s infinite;

-webkit-animation-timing-function:linear;

}

走马灯效果

var spa = document.getElementById("spa");

var width = 0-(spa.offsetWidth);

var style = document.getElementById("asty");

style.innerHTML = '@-webkit-keyframes demo{from {left: 100%;}to {left: '+width+'px;}}';

spa.className = 'a';

css3 transition和animation的区别与联系

1. transition 一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性: transition-property:动画展示哪些属性,可以使用all关键字: transition ...

css3 transition animation nick

时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

弄清 CSS3 的 transition 和 animation

弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

css3实践之图片轮播(Transform，Transition和Animation)

楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

CSS3中动画属性transform、transition和animation

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

CSS3中动画属性transform、transition 和 animation

CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

CSS3动画 transition和animation的用法和区别

transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

css3的动画特效--元素旋转(transition，animation)

开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

CSS3 Transform、Transition和Animation属性总结

CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

随机推荐

Android dex分包方案

当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方法数量过多,编译时 ...

HDNOIP201206施工方案

HDNOIP201206施工方案 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 c国边防军在边境某处的阵地是由n个地堡组成的. ...

动态IP无法获取默认网关，显示0.0.0.0的解决办法

IP地址使用自动获取IP方式,可以获取到IP地址和子网掩码,默认网关无法获取,显示0.0.0.0,通过修复Winsock和LSP可以解决该问题,具体步骤如下:一.修复winsock1.单击开始> ...

PCB敷铜小结

有人说加大敷铜可以加大散热面,其实,对于此我不以为然.我说过铜是一种散热吸热快的金属,如果加大散热面要靠加大敷铜的面积的话,那就没有必要给很多的器件加热片了,我想大家对于计算机都颇有心得,一定攒过电脑 ...

CSS属性合写

animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animat ...

LabView ModBus安装

好久没写东西了(好菜哦...) 最近搞一个项目,开始入门LabVIEW,感觉类似于MATLAB里面的simulink 我使用LabVIEW是想用来和PLC通信的.因为PLC里面可以做ModBus,所以 ...

Unity暂停游戏功能

关于暂停游戏功能的做法,网上的教程以及Unity官方发布的Demo都是通过把Time.timeScale设成0来实现的,然而这会导致一些蛋疼的问题,因为Time.timeScale是全局变量,改成0后 ...

java-基础-【一】枚举

enum 的全称为 enumeration, 是 JDK 1.5  中引入的新特性,存放在 java.lang 包中. 一.static final定义[jdk1.5之前] public static ...

javascript中function和object的区别,以及javascript如何实现面向对象的编程思想.

一、IOC和DI的概念

IOC---Inversion of Control (控制反转) 在java中,IOC意味着将你设计好的对象交给容器控制,而不是传统的在你对象内部直接控制. 谁控制谁,控制什么  -->IOC ...