css3的animation 动画

最新推荐文章于 2024-04-22 20:01:30 发布
最新推荐文章于 2024-04-22 20:01:30 发布
阅读量737 收藏
点赞数
文章标签： css3 animation 动画 keyframes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling811/article/details/17116745
版权

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。


CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。


CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3


CSS3 动画代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{

	color:#ffffff;
	font-weight:bold;
	font:bold 14px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	border-radius:5px;
	-webkit-border-radius:5px;
	
	width:100px;
	height:100px;
	background:#F00;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-play-state:running;
	
	-moz-animation-name:myfirst;
	-moz-animation-duration:5s;
	-moz-animation-timing-function:linear;
	-moz-animation-delay:2s;
	-moz-animation-direction:alternate;
	-moz-animation-iteration-count:infinite;
	-moz-animation-play-state:running;
	
	-o-animation-name:myfirst;
	-o-animation-duration:5s;
	-o-animation-timing-function:linear;
	-o-animation-delay:2s;
	-o-animation-direction:alternate;
	-o-animation-iteration-count:infinite;
	-o-animation-play-state:running;
	
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-direction:alternate;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-play-state:running;
}
/*
@keyframes myfirst{
	form{background:#F00;}
	to {background:#0F0;}
}
*/
@keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
@-moz-keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
@-o-keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
</style>
<title>无标题文档</title>
</head>

<body>

<div>这个是css3的动画效果（在ie9和之前的版本不支持）</div>
</body>
</html>

CSS3 动画效果图


移动中的效果图：


依然那么楞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5微软Win10转圈加载开机动画的纯CSS3实现
10-18
首发实现，关于这精致的动画，网上已有些相关实现方案，唯独没有HTML5实现，笔者在此给出纯CSS3实现的版本，化繁为简。以最简洁的方式实现最接近原生的效果，并在此基础上加入了增强色彩渐变。 不可否认，原生动画更加的流畅自然。为了接近自然，测试过很多参数
CSS3 animation 动画用法介绍
保持清醒
12-30 7720
一、css3 动画是什么 css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。 二、css3的动画属性 三、animation 介绍 animation主要包含六个属性，具体含义如下： （一）、keyframe 在介绍animation具体使用之前，要先介绍keyframe。 @keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。 要使
css的animation动画
yuan0209的博客
11-25 7331
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
css3 animation (动画) 属性
博客
07-02 751
值 说明 animation-name 动画名称 animation-duration 动画总时长 animation-timing-function 设置动画速度 animation-delay 设置动画延时 animation-iteration-count 设置动画播放次数 animation-direction 是否轮流反向播放动画 animation-fill-mode 当动画不播放时（动画完成或动画有延时为播放时），要应用这个样式 animation-play
css3延迟执行动画,CSS3 animation动画，循环间的延时执行时间
weixin_42530570的博客
08-04 2281
如下代码，其中的delay值为3s，但是animation按现在的规则，这个delay是指动画开始前的延时，在动画循环执行间，这个delay是不生效的。.item{webkit-animation: revolving 1s 3s infinite;animation: revolving 1s 3s infinite;}@-webkit-keyframes revolving{0%{-webki...
css3大绝技之animation动画
wj624的博客
04-27 9447
✨✨✨css3大绝技之animation动画 动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 制作动画分为两步: 1．先定义动画 2．再使用(调用)动画 ✨✨🎈 动画的基本使用 ✨🎈🎈 用keyframes定义动画（类似定义类选择器） 语法格式： @keyformes 动画名称 { 0% { width:100px; } 100% { width:200px;
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图效果，需要的朋友参考下吧
CSS3 animation动画
04-15
animation Transform CSS3 、 @keyframes利用C3的动画效果写的一些小的动画效果
css3 animation动画制作点击波特效特效代码
03-20
css3 animation动画制作点击波特效是一款使用CSS3 animation动画来制作点击波效果，可以在按钮和图片等元素上制作点击波特效。
纯css3 animation动画属性点击loading加载动画
11-05
纯css3 animation动画属性点击loading加载动画 纯css3 animation动画属性点击loading加载动画
五个关于CSS3的常见面试题
qq_42431718的博客
04-19 376
答案：CSS3中的字体图标是一种使用字体文件来显示图标的方法，通常使用特定的字体图标库（如Font Awesome、Material Icons等）。答案：CSS3中的渐变是一种可以在元素背景、边框或文本中创建平滑过渡效果的技术。答案：CSS3中的过渡是一种可以在元素的属性值发生变化时平滑过渡的技术。答案：CSS3中的网格布局是一种用于二维布局的强大的布局系统，通过将容器划分为行和列的网格来控制元素的布局。答案：CSS3中的伪类是用来选择元素的特定状态或位置的选择器，通常以冒号（:）开头。
CSS3多列（详解网页多列布局应用）
最新发布
百赢出品，必属精品
04-22 602
CSS3 多列布局是一种用于排列文本内容的 CSS 模块，它允许开发者将文本分成多列显示，从而创建出类似于报纸、杂志等印刷媒体的布局效果。多列布局适用于需要在网页上呈现大段文本的场景，使得文本内容更具可读性和美观性。
五个关于CSS3的常见面试题及其答案
qq_42431718的博客
04-19 489
它包括四个部分：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。答案：响应式设计是一种网页设计方法，可以使网站在不同设备上（如桌面、平板、手机等）以及不同屏幕尺寸上呈现出最佳的布局和用户体验。答案：CSS3中常见的选择器包括：元素选择器、ID选择器、类选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器、属性选择器、伪类选择器和伪元素选择器等。答案：Flexbox是一种用于布局设计的CSS3模块，它提供了一种更加灵活的方式来排列、对齐和分布元素。
CSS3 animation-direction 属性
2303_79895461的博客
04-16 397
animation-direction 属性定义是否循环交替反向播放动画。**注意：**如果动画被设置为只播放一次，该属性将不起作用。可动画化（animatable）object。
深入理解CSS3 box-sizing属性：重塑盒子模型，精准控制元素尺寸
艾恩小灰灰的博客
04-19 919
CSS3的box-sizing属性为开发者提供了重塑盒子模型的灵活性，使得在面对复杂布局和精确尺寸控制的需求时，能够更得心应手。理解并熟练运用border-box模式，不仅可以避免常见的布局问题，还能简化CSS计算，提升开发效率。希望本文的解析与示例能帮助您深入理解并有效利用box-sizing属性，为您的项目带来更加整洁、可控的布局体验。
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5475
再看代码： JS部分。
多图表实现员工满意度调查数据分析python
04-22
员工满意度是指员工对于工作环境、待遇、职业发展和组织管理等方面的满意程度。它是衡量员工对工作的整体感受和情绪状态的重要指标。
2020届软件工程本科毕业生毕业设计项目.zip
04-22
2020届软件工程本科毕业生毕业设计项目
html动画效果停顿几秒,css3 animation动画执行结束，停顿几秒后重新开始执行
05-17
而对于CSS3 animation动画执行结束，停顿几秒后重新开始执行，可以使用animation-delay属性来实现。例如，下面的代码将使动画执行完后停顿3秒后再次执行： ```css .myAnimation { animation: myAnimation 2s ease-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值