CSS动画概述_html/css_WEB-ITnose

给HTML中的内容 添加动画的三种方法之一 是，CSS animation【另外两种方法是：CSS transitions及JavaScript】。CSS动画相对简单。它允许你使用元素的CSS属性来添加动画。它可以让你创造出很多非常酷的效果，如移动、淡入淡出、改变颜色，等等。

首先，我们来看看一个例子。下面是一个CSS动画，应用于云朵上，使得它们可以轻轻地上下弹跳：

本教程中，你将学习关于CSS动画内容，而不仅是创建一些类似移动云朵的东西，还包括一些更酷且实用的东西。你将学习如何实用 animation 属性定义一个CSS动画，如何使用 keyframes ，以及如何调整各种动画相关的属性，来完成你想要的动画效果。

开始！

创建一个简单的动画

学习CSS动画最简单（也最有趣）的方式是实践，然后再学习原理。先创建一个新的HTML文件，然后添加如下的HTML和CSS。

     Bouncing Clouds    #mainContent {    background-color: #A2BFCE;    border-radius: 4px;    padding: 10px;    width: 600px;    height: 300px;    overflow: hidden;}.cloud {    position: absolute;}#bigcloud {    margin-left: 100px;    margin-top: 15px;}       


      
查看更多关于CSS动画概述_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114356