CSS 动画(CSS3) animation

最新推荐文章于 2024-05-15 10:37:51 发布
最新推荐文章于 2024-05-15 10:37:51 发布
阅读量185 收藏 2
点赞数
分类专栏： web前端 文章标签： CSS无缝滚动

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

在这里插入图片描述
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画"
animation-timing-function

在这里插入图片描述

animation-iteration-count

在这里插入图片描述

animation-direction

在这里插入图片描述

animation-fill-mode

在这里插入图片描述

animation-play-state

在这里插入图片描述

体会动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>体会动画</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: skyblue;
		/* 动画名称自定义 动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向; */
		animation: go 2s ease 0s infinite reverse running ; /*  引用动画  infinite无限循环*/
	}
	/* @keyframes 动画名称 {} 定义动画 */
	@keyframes go {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(600px);
		}
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

多组动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多组动画</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: skyblue;
		/* 动画名称自定义 动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向; */
		animation: go 2s infinite ; /*  引用动画  infinite无限循环*/
		/* margin: 50px auto; */
	}
	/* @keyframes 动画名称 {} 定义动画 */
	@keyframes go {
		0% { /* 起始位置 等价于刚才的from */
			transform: translate3d(0,0,0);
		}
		25% {
			transform: translate3d(800px,0,0);
		}
		50% {
			transform: translate3d(800px,400px,0);
		}
		75% {
			transform: translate3d(0,400px,0);
		}
		100% {  /* 100% 相当于结束 to */
			transform: translate3d(0,0,0); 
		}
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

小汽车案例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>奔跑的小汽车</title>
   <style>
   img {
   	animation: car 5s infinite; /* 引用动画 */
   	width: 100px;
   }
   @keyframes car {  /* 定义动画 */
   	0% {
   		transform: translate3d(0,0,0);
   	}
   	50% {
   		transform: translate3d(1000px,0,0);
   	}
   	51% {
   		/* 如果有多组变形 用空格隔开 */
   		transform: translate3d(1000px,0,0) rotateY(180deg);
   	}
   	99% {
   		transform: translate3d(0,0,0) rotateY(180deg);
   	}
   	100% {
   		transform: translate3d(0,0,0) ;
   	}

   }
   </style>
</head>
<body>
   <div>
   <img src="images/car.jpg" alt="">
   </div>
</body>
</html>

无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style>
	* {
		margin: 0px;
		padding: 0;
	}
	ul {
		list-style: none;
	}
	nav {
		width: 882px;
		height: 86px;
		border: 1px solid gray;
		margin: 100px auto;
		overflow: hidden;
	}
	nav li {
		float: left;
	}
	nav ul {
		width: 200%;
		animation: moving 5s linear infinite; /* 引用动画 匀速运动 无限循环*/
	}
	nav:hover ul {
		animation-play-state: paused; /* 鼠标经过暂停动画 */
	}
	@keyframes moving {
		from {
			transform: translate3d(0,0,0);
		}
		to {
			transform: translate3d(-882px,0,0);
		}
	}

	</style>

</head>
<body>
	<nav>
		<ul>
			<li><img src="images/nav1.jpg" alt=""></li>
			<li><img src="images/nav2.jpg" alt=""></li>
			<li><img src="images/nav3.jpg" alt=""></li>
			<li><img src="images/nav4.jpg" alt=""></li>
			<li><img src="images/nav5.jpg" alt=""></li>
			<li><img src="images/nav6.jpg" alt=""></li>
			<li><img src="images/nav7.jpg" alt=""></li>

			<li><img src="images/nav1.jpg" alt=""></li>
			<li><img src="images/nav2.jpg" alt=""></li>
			<li><img src="images/nav3.jpg" alt=""></li>
			<li><img src="images/nav4.jpg" alt=""></li>
			<li><img src="images/nav5.jpg" alt=""></li>
			<li><img src="images/nav6.jpg" alt=""></li>
			<li><img src="images/nav7.jpg" alt=""></li>
		</ul>
	</nav>
</body>
</html>

链接：https://pan.baidu.com/s/1gfpZX9ZUn_OFspLrmRS3kQ 提取码：jy1t

_wjl_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3之动画
zh_hunan的博客
10-28 886
动画(animation) 什么是动画 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200...
css3动画
juse__we的博客
06-05 768
参考网站 CSS3 @keyframes 规则http://www.w3school.com.cn/cssref/pr_keyframes.asp CSS3 animation 属性http://www.w3school.com.cn/cssref/pr_animation.asp animation-name animation-duration animation-timing-...
看这篇就够了：一文梳理 CSS3 动画animation的用法
最新发布
weixin_40348267的博客
05-15 646
动画在网页设计和开发中扮演着重要角色，使用 CSS3 中的动画可以让网页有更加酷炫的效果，并吸引到用户的眼球，今天瑶琴带大家来学习或复习 CSS3 中 动画animation 的使用。
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
动画(CSS3) animation
ByeBye(野蛮生长)
05-22 509
animation动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; (除了名字，动画时间，延时有严格顺序要求其它随意) @keyframes 动画名称 { from{ 开始位置 } /*0%*/ to{ 结束 } /*...
CSS的动画特效（animation）
热门推荐
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
CSS之动画
编译的阿喵
09-15 1233
最近在学习饿了么vue的demo，接触到了挺多css3动画，之前有学习过，但更多是需要了就拿出来看看，直接上手用，今天来对三种动画属性进行系统学习。 css3动画主要包括Transform、Transition、Animation。 区别 transition：允许css的属性值在一定的时间区间内平滑地过渡。需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性。 anim
css3的animation
笑望灬星辰
04-12 144
css3的animation css3的 animation 是css3新增的动画属性，这个css3动画的每⼀帧是通过 @keyframes 来声明的， keyframes 声明了动画的名称，通过 from 、 to 或者是百分⽐来定义 每⼀帧动画元素的状态，通过 animation-name 来引⽤这个动画，同时css3动画也可以定 义动画运⾏的时⻓、动画开始时间、动画播放⽅向、动画循环次数、动画播放的⽅式 这些相关的动画⼦属性有： animation-name 定义动画名、 animation-d
CSS3动画 animation
qq_52301431的博客
04-01 2733
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 格式： animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动 animation: onemove 5s ease-in-out 2s 3 alternate; 1、基本使用 1.1、语法fro
CSS3动画
励志要成为it大佬的博客
01-25 840
以前学的时候也了解过css3动画  ， 但是总感觉有点会又不会的样子，今天记录一下css3动画最主要的是CSS3 @keyframes 规则: IE9版本及低版本不兼容如果动画改变的少 可以直接这里的myfirst是动画的名字@keyframes myfirst{ from{background:red;} to{background:yellow;}}@-webkit-keyframes myf...
CSS3 动画
JustinNeil的博客
06-02 357
CSS3过渡 CSS3中，我们为了添加某种效果可以从一种样式转变到另一种的时候，无需使用Flash动画或JavaScript。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 指定要添加效果的CSS属性 指定效果的持续时间。 div{ transition: width 2s; -webkit-transform: width 2s; /*...
CSS3之动画（animation）
Ivy_Ch的博客
08-06 377
动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： 1.调用 animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 2.声明 @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } 可...
css animation
Var_YanGuangYing
09-10 356
animation 是 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state 这些属性的一个简写形式。 anima...
CSS Animation
了凡
04-26 422
CSS Animation 教程： CSS动画简介 css3 animation 属性众妙 http://animista.net/
css的animation
qq_36893984的博客
04-15 146
animation： 这个也是一个重要的属性，但是不经常用，容易遗忘，记录一下： 简写： animtion:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction 1.animation-name:规定需要绑定到选择器的 keyframe 名称 2.animation-duration:规定完成动画所花费的时间
CSS3动画与2D变形详解
CSS3动画（`animation`）是更高级的动态效果，允许开发者定义一系列的关键帧，元素将在指定的时间内按照这些关键帧的变化进行动画展示。这通常结合`@keyframes`规则来定义动画的过程。 CSS3的动画和变形特性极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值