CSS3 @keyframes动画规则

最新推荐文章于 2023-11-06 11:31:21 发布

boonyaxnn

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量3.9k

点赞数 2

分类专栏： CSS3 文章标签： css3 keyframes

本文链接：https://blog.csdn.net/boonyaxnn/article/details/61619063

版权

CSS3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS3 动画属性

W3CSchool标准CSS使用语法 *@keyframes 针对不同浏览器兼容

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

注：目前浏览器都不支持 @keyframes 规则；Firefox 支持替代的 @-moz-keyframes 规则；Opera 支持替代的 @-o-keyframes 规则；Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

@keyframes 语法

html与css代码:div匀速向下运动

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>index</title>
		<meta name="description" content="">
		<meta name="author" content="boonya">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: #39B940;
				position:relative;
				-moz-animation:mymove 5s infinite;/*infinite无限循环*/
			}
			@-moz-keyframes mymove{
				from{top:0px;}
				to{top:300px;}
			}
		</style>
	</head>
	<body>
		<div> 
			<p>我是小妞妞。</p>
		</div>
		
	</body>
</html>

效果图

注：图片为静态，效果为动态，请参考http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes

带有多个 CSS 样式的多个 keyframe 选择器,html与css代码

<style>
			div {
				width: 200px;
				height: 200px;
				background-color: #39B940;
				position:relative;
				-moz-animation:mymove 5s infinite;	
				border-radius:25px;
			}
			@-moz-keyframes mymove{
				0%   {top:0px; 
				      left:0px; 
				      background:#A217A2;}
				25%  {top:0px; 
				      left:100px; 
				      background:#0FC646;}
				50%  {top:100px; 
				      left:100px; 
				      background:#DEAF24;}
				75%  {top:100px; 
				      left:0px; 
				      background:#0FC646;}
				100% {top:0px; 
				      left:0px; 
				      background:#A217A2;}
			}
		</style>

注：图片为静态，效果为动态，请参考 http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4

boonyaxnn

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3 @keyframes动画规则

W3CSchool标准CSS使用语法 *@keyframes 针对不同浏览器兼容@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /*
复制链接

扫一扫