一、CSS3动画介绍

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

二、CSS3动画制作方式

css3 动画制作分为两步：1.创建动画、2.绑定动画（调用动画）。

1.创建动画

@keyframes 规则

@keyframes 规则用于创建动画。单词是关键帧的意思，在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。注意：还可以再0%-100%之间添加多个帧。

@keyframes 书写方法

@keyframes 动画名称 { /*动画过程，可以添加任意百分比处的动画细节*/}

注意：其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

2.绑定动画（调用动画）

2.1animation属性

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。 animation属性用于对动画进行捆绑。

2.2animation属性语法

div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
}

2.3单一属性列表

三、CSS3动画案例—小球弹跳效果实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css3—动画</title><style>body,div {margin: 0;padding: 0;}.ball {width: 100px;height: 100px;border-radius: 50%;margin: 150px auto;background-color: pink;animation: move2 2s linear infinite 0s;}@keyframes move{from {transform:translateY(0);}to {transform: translateY(100px);}}/*通过2种写法，我们再浏览器中发现，第二种方式的动画效果更好看一些，视觉上有弹跳的效果，说明我们给他添加多个帧的方式是更好的。注意：1.我们再定义动画的时候必须将0%或者from设置为0，避免出现帧动画的问题。2.再创建完了动画，一定要给需要该动画的元素绑定动画（调用动画）才能生效。否则就相当于写了动画，白写，没有去调用它。*/@keyframes move2 {0% {transform: translateY(0);}25% {transform: translateY(100px);}50% {transform: translateY(0);}75% {transform: translateY(-100px);}100% {transform: translateY(0);}}</style>
</head>
<body><div class="ball"></div>
</body>
</html>

四、浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

（30）css3动画相关推荐

css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
一个栗子上手CSS3动画
最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往 MDN 在开始栗子前,我们先补补基础知识. css3动画 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
35个让人惊讶的 CSS3 动画效果演示
本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
CSS3: 动画循环执行(带延迟)的实现
出处:http://www.cnblogs.com/starof/p/5443445.html 一.最终效果需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现 ...

（30）css3动画