html 动画

.nana{
		width: 200px;
	    height: 300px;
		background:url(../image/bb.png) no-repeat;
		-webkit-animation-name: zwn;
		-webkit-animation-duration: 900ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: step-start;

	}
	@-webkit-keyframes zwn{
	0%{background-position:0 0 ;}
	14.2%{background-position: -180px 0;}
	28.4%{background-position: -360px 0;}
	42.6%{background-position: -540px 0;}
	56.8%{background-position: -720px 0;}
	71%{background-position: -900px 0;}
	85.2%{background-position: -1080px 0;}
	100%{background-position: 0 0;}
}

  html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="nana"></div>
	</body>
</html> 

笔记:

实现动画步骤

第一步:-webkit-animation-name 动画名字

第二步:创建动画

@-webkit-keyframes zwn{
	0%{background-position:0 0 ;}
	14.2%{background-position: -180px 0;}
	28.4%{background-position: -360px 0;}
	42.6%{background-position: -540px 0;}
	56.8%{background-position: -720px 0;}
	71%{background-position: -900px 0;}
	85.2%{background-position: -1080px 0;}
	100%{background-position: 0 0;}
}第三步:动画运动时间,动画运动次数,以及开始地方注意:step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;

图片我已经上传

时间: 2024-10-27 00:43:26

html 动画的相关文章

*C#(WPF)--矩阵拖动和矩阵动画(拖动展开,不足动画效果)

最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行的,这个工具条主要功能是:一个工具条,可进行拖拉.可进行拖拉展开,可在拖动之后不足展开并反向继续展开剩下的部分: 一.[拖动]   拖动的核心代码是通过矩阵进行定位和拖动的,定位是以父容器为模板的.以下是核心代码(及效果图): 1 /// <summary> 2 /// 这里TitleBar代指最

android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状态栏等源码

Android精选源码 轻量级底部导航栏 android手机卫士源码 android实现高仿今日头条源码 一个用Kotlin写的简单漫画App源码 android吐槽项目完整源码 实现可以滑动文字逐渐变色的TabLayout android实现将app隐藏加密功能的源码 android实现横向滚动的卡片堆叠布局 android仿支付宝的咻咻动画源码 android状态栏和沉浸式导航栏管理源码 Android优质博客 从BaseActivity与BaseFragment的封装谈起 这篇博客主要是从

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

JS 实现无缝滚动动画原理(初学者入)

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演

U3D帧动画的制作

1.打开动画编辑器(动画制作器!)windows标签下的Animation 2.点击新建一个动画,保存后进入动画编辑状态.注意新建后创建一个动画和控制器(animator Contrller),同时为当前物体添加一个animator组件. 3.选择添加property,可以选择让动画改变哪些参数. 本例中制作一个窗口打开和关闭的简单动画.通过缩放窗口大小来控制打开关闭的动画.所以添加一个Scale的参数. 4.先制作一个关闭的动画:第一帧的时候控制scale都为1,也就是正常大小.60帧的时候控

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

HTML5 CSS3 诱人的实例: 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

angular 动画

ngAnimate 做了什么? ngAnimate 模型可以添加或移除 class . ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画. AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-swit

css动画效果

1.2D,3D转换 -1.通过2D,3D转换,我们能够对元素进行移动,缩放,转动,拉长,或拉伸. 转换是使元素改变形状,尺寸和位置的一种效果. 可以使用2D或者3D转换来转换元素. -2.2D(transform)转换方法 1.translate(x,y)移动,第二个参数未提供时默认为0 2.rotate(xdeg)旋转 3.scale(x,y)缩放 4.skew(xdeg,ydeg)倾斜,第二个参数未提供时默认为0 -3.3D转换方法 1.rotateX() 2.rotateY() <!DOC

Android攻城狮基础动画

Android基础动画 1. Tween Animation 变换动画 2. Frame Animation 帧动画 3. Layout Animation 布局动画 4. Property Animation 属性动画 Tween Animation(变换动画)在Android中又被分为四种: Alpha:渐变透明度动画 Scale:渐变尺寸缩放动画 Translate:位置移动动画 Rotate:旋转动画 Tween Animation共同属性: 1. Duration:动画持续时间(单位: