css动画属性

最新推荐文章于 2024-05-18 15:14:09 发布

WKK_

最新推荐文章于 2024-05-18 15:14:09 发布

阅读量41

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/weixin_53812239/article/details/129461296

版权

css动画属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>copy菜鸟教程(runoob.com)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	/*规定动画名*/
	animation-name:myfirst;
    /*规定动画完成一个周期所花费的秒或毫秒数*/
	animation-duration:5s;
	/*规定动画的速度曲线*/
	animation-timing-function:linear;
	/*规定动画何时开始*/
	animation-delay:2s;
	/*规定动画被播放的次数*/
	animation-iteration-count:infinite;
	/*规定动画是否在下一周逆向地播放*/
	animation-direction:alternate;
	/*规定动画是否正在运行暂停*/
	animation-play-state:running;
	/* Safari and Chrome: 兼容谷歌浏览器 */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>