css3-动画(animation)

yacheng 发布于2019-04-23 13:29 / 2971人阅读

摘要：动画在启动前的延迟间隔，默认是动画的播放次数，默认是是否轮流反向播放动画动画是否正在运行或已暂停。值指定暂停动画指定正在运行的动画，默认。

css3-动画（animation）：

具有以下属性：

1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。值：paused 指定暂停动画； running 指定正在运行的动画，默认。

实例：本demo以平移（translate）为例说明动画的整个过程

html:

css:

.warp{
	    height: 100px;
	     width: 100px;
	     border: 1px solid #eee;
			
            animation-name:moves;
            animation-direction:alternate;
            animation-delay: 0.2s;
            animation-duration: 5s;
            animation-play-state: paused;
            animation-iteration-count: 3;
           /*以上可以简写成：*/
           animation: moves 5s linear 0.2s 3;
}

@keyframes moves{                           /*动画名称自定义*/
	10%{                                    /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
		transform: translate(100px,0);       
		-ms-transform:translate(100px,0);	 /*IE 9*/ 
		-moz-transform:translate(100px,0); 	/* Firefox */
		-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
		-o-transform:translate(100px,0); 	/* Opera */
	}
	30%{                                    /*时间点可以任意*/
		transform: translate(100px,100px);
		-ms-transform:translate(100px,100px);	 /*IE 9*/ 
		-moz-transform:translate(100px,100px); 	/* Firefox */
		-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
		-o-transform:translate(100px,100px); 	/* Opera */
	}
	60%{                                       /*时间点可以任意*/
		transform: translate(0,100px);
		-ms-transform:translate(0,100px);	 /*IE 9*/ 
		-moz-transform:translate(0,100px); 	/* Firefox */
		-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
		-o-transform:translate(0,100px); 	/* Opera */
	}
	100%{                                /*时间点可以任意*/
		transform: translate(0,0);
		-ms-transform:translate(0,0);	 /*IE 9*/ 
		-moz-transform:translate(0,0); 	/* Firefox */
		-webkit-transform:translate(0,0); /* Safari 和 Chrome */
		-o-transform:translate(0,0); 	/* Opera */
	}
}

GPU云服务器云服务器 css3动画高性能css3动画 animated anime

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1940.html

css3 动画（三）animation 简介

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识前言上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animati...

itvincent 2019-08-29 16:05 评论0 收藏0
css3 动画（四）animation.css 源码分析

摘要：前言上一篇动画三简介中只是简单的介绍了一下的子属性，并没有真正的使用。在本篇中，通过阅读这个的动画库，来加深对的属性的理解。是一个具有非常多的动画效果的动画库。动画效果演示用法加上基础类以及动画类，就会有闪烁的动画效果。前言上一篇 css3 动画（三）animation 简介中只是简单的介绍了一下 animation 的子属性，并没有真正的使用。在本篇中，通过阅读 animate...

ThreeWords 2019-08-29 16:05 评论0 收藏0
进入 CSS3 动画

摘要：我最近有机会深入研究一些动画。下一步是添加动画效果并确定它们何时发生。创建关键帧后，您可以将动画称为属性。点击动画使用上面的关键帧和动画语法，这里是我用来在本页顶部的中制作动画的代码。我最近有机会深入研究一些CSS3动画。我使用了像animate.css这样的库，用javascript完成了动画，但从未做过任何自定义的CSS3工作原文任务我们最近在SeatGeek更新了我们的...

lindroid 2019-08-30 15:44 评论0 收藏0
css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0
两种方案开发小程序动画

摘要：通过这种方法产生的动画，无法按照原有轨迹收回，所以在事件之后设置了定时器，定义在执行动画之后，执行另一个动画。方式存在较多局限性动画只能执行一次，循环效果需要通过定时器完成。在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过api方式来实现。指路：小程序animatiom动画API API解读小程序中，通过调用api来...

MingjunYang 2019-08-23 12:58 评论0 收藏0
两种方案开发小程序动画

摘要：通过这种方法产生的动画，无法按照原有轨迹收回，所以在事件之后设置了定时器，定义在执行动画之后，执行另一个动画。方式存在较多局限性动画只能执行一次，循环效果需要通过定时器完成。在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过api方式来实现。指路：小程序animatiom动画API API解读小程序中，通过调用api来...

chengjianhua 2019-08-29 17:13 评论0 收藏0