CSS 动画

CSS 动画定义和用法一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。4.0 -webkit-10.016.05.0 -moz-4.0 -webkit-15.0 -webkit-12.112.0 -o-实例背景颜色逐渐地从红色变化到蓝色：@keyframes mymove{from {background-color:





red;}to {background-color:





blue;}}/*Safari 和 Chrome:





*/@-webkit-keyframes mymove{from {background-color:





red;}to {background-color:





blue;}}尝试一下 ?动画属性CSS 中的动画属性：属性实例background尝试一下 》background-color尝试一下 》background-position尝试一下 》background-size尝试一下 》border尝试一下 》border-bottom尝试一下 》border-bottom-color尝试一下 》border-bottom-left-radius尝试一下 》border-bottom-right-radius尝试一下 》border-bottom-width尝试一下 》border-color尝试一下 》border-left尝试一下 》border-left-color尝试一下 》border-left-width尝试一下 》border-right尝试一下 》border-right-color尝试一下 》border-right-width尝试一下 》border-spacing尝试一下 》border-top尝试一下 》border-top-color尝试一下 》border-top-left-radius尝试一下 》border-top-right-radius尝试一下 》border-top-width尝试一下 》bottom尝试一下 》box-shadow尝试一下 》clip尝试一下 》color尝试一下 》column-count尝试一下 》column-gap尝试一下 》column-rule尝试一下 》column-rule-color尝试一下 》column-rule-width尝试一下 》column-width尝试一下 》columns尝试一下 》filter尝试一下 》flex flex-basis尝试一下 》flex-grow尝试一下 》flex-shrink尝试一下 》font尝试一下 》font-size尝试一下 》font-size-adjust font-stretch font-weight尝试一下 》height尝试一下 》left尝试一下 》letter-spacing尝试一下 》line-height尝试一下 》margin尝试一下 》margin-bottom尝试一下 》margin-left尝试一下 》margin-right尝试一下 》margin-top尝试一下 》max-height尝试一下 》max-width尝试一下 》min-height尝试一下 》min-width尝试一下 》opacity尝试一下 》order尝试一下 》outline尝试一下 》outline-color尝试一下 》outline-offset尝试一下 》outline-width尝试一下 》padding尝试一下 》padding-bottom尝试一下 》padding-left尝试一下 》padding-right尝试一下 》padding-top尝试一下 》perspective尝试一下 》perspective-origin尝试一下 》right尝试一下 》text-decoration-color尝试一下 》text-indent尝试一下 》text-shadow尝试一下 》top尝试一下 》transform尝试一下 》transform-origin尝试一下 》vertical-align尝试一下 》visibility width尝试一下 》word-spacing尝试一下 》z-index尝试一下 》