css3如何实现动画效果

最新推荐文章于 2024-04-19 22:47:36 发布

芳草斜阳_晨光

最新推荐文章于 2024-04-19 22:47:36 发布

阅读量2.0k

点赞数 1

文章标签： css3 动画 css

本文链接：https://blog.csdn.net/daishu_shu/article/details/124589271

版权

文章目录

前言
一、animation (动画) 属性
- 语法
- 值与说明[(原链接)](https://www.runoob.com/cssref/css3-pr-animation.html)
二、@keyframes 规则
三、实例
总结

前言

css3提供了很方便的实现动画的效果。主要用到animation (动画) 属性和@keyframes 规则。下面就来介绍animation和@keyframes以及如何使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、animation (动画) 属性

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值与说明(原链接)

在这里插入图片描述

二、@keyframes 规则

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值与描述(原链接)

三、实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实例</title>
		<style>
			
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				margin: 100px auto;
				animation: heart 0.5s infinite;//一个叫heart的动画 每隔0.5s执行动画 无限次
			}
			@keyframes heart{
				0%{
					transform: scale(1);
				}
				50%{
					transform: scale(1.5);
				}
				100%{
					transform: scale(1);
				} 
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

QQ录屏20220505155643

总结

分享就到这里了，css的动画效果关键就是animation (动画) 属性和@keyframes的使用。如果这篇分享对你有帮助请记得点赞或评论反馈下哈！！！谢谢

芳草斜阳_晨光

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3如何实现动画效果

文章目录前言一、animation (动画) 属性语法值与说明[(原链接)](https://www.runoob.com/cssref/css3-pr-animation.html)二、@keyframes 规则定义和用法语法值与描述[(原链接)](https://www.w3school.com.cn/cssref/pr_keyframes.asp)三、实例总结前言css3提供了很方便的实现动画的效果。主要用到animation (动画) 属性和@keyframes 规则。下面就来介绍animat
复制链接

扫一扫