WEB前端

css3简单动画的学习

位置:首页 > WEB前端 > css3教程,2017-12-06 10:44
css3简单动画的学习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">this is 哈哈哈</div>
</body>
<style>
	#app{
		width: 100%; 
		text-align:center;
	    -webkit-animation:myfirst 2s; /* Safari and Chrome */
	}
	@-webkit-keyframes myfirst /* Safari 和 Chrome */
	{
		0%   {
			opacity: 0;  
	    	-webkit-transform: translate(100%, 0);  
		}
		25%  {
			opacity: 0.25;  
	    	-webkit-transform: translate(80%, 0);
		}
		50%  {
			opacity: 0.5;  
	    	-webkit-transform: translate(50%, 0);
	    }
		100% {
			opacity: 1;  
	    	-webkit-transform: translate(0%, 0);
	    }
	}
</style>
</html>


TAGS:css3动画

上编:CSS3的各种渐变

下编:没有了



猜你喜欢


NewHot手机版