失眠网 > css3如何实现动画效果

css3如何实现动画效果

时间：2022-12-29 14:02:58

相关推荐

css3如何实现动画效果

文章目录

前言一、animation (动画) 属性语法值与说明[(原链接)](/cssref/css3-pr-animation.html) 二、@keyframes 规则定义和用法语法值与描述[(原链接)](/cssref/pr_keyframes.asp) 三、实例总结

前言

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录屏0505155643