第26节CSS3动画.PPTVIP

传媒学院 传媒学院 传媒学院 第26节 CSS3动画 武汉纺织大学传媒学院 cm.wtu.edu.cn * * 传媒学院 通过 CSS3，能够创建动画，它可以在许多网页中取代动画图片、Flash 动画以及 JavaScript 实现方法 先定义动画的关键帧规则 再对希望具有动画效果的元素使用这些规则 1.CSS3动画介绍 * * 传媒学院 关键字 @keyframes @-webkit-keyframes Safari 和 Chrome使用的属性名 例子 @keyframes myfirst { from {background: red;} to {background: yellow;} } 这是一个只有两个关键帧（背景红，背景黄）的规则；规则的名称（动画名称）叫myfirst 2.定义关键帧 * * 传媒学院 样式代码，只能手写 Q：应该写在哪里？ 动画属性 animation 例子 #t { animation: myfirst 5s; -webkit-animation: myfirst 5s; } 动画名称为myfirst，动画持续时间5秒 3.使用动画 * * 传媒学院 这是一个简写属性，用于设置以下6个属性 animation-name 动画名称 animation-duration 持续时间 animation-timing-function 动画的速