PPT《第26节CSS3动画》

第26节CSS3动画 武汉纺织大学传媒学院cm.

wtu.edu.cn * * 传媒学院 通过 CSS3,能够创建动画,它可以在许多网页中取代动画图片、Flash 动画以及 JavaScript实现方法先定义动画的关键帧规则再对希望具有动画效果的元素使用这些规则 1.CSS3动画介绍 * * 传媒学院 关键字@keyframes@-webkit-keyframesSafari 和Chrome使用的属性名例子@keyframes myfirst { from {background: red;

} to {background: yellow;

} }这是一个只有两个关键帧(背景红,背景黄)的规则;

规则的名称(动画名称)叫myfirst 2.定义关键帧 * * 传媒学院 样式代码,只能手写Q:应该写在哪里? 动画属性animation例子#t { animation: myfirst 5s;

-webkit-animation: myfirst 5s;

}动画名称为myfirst,动画持续时间5秒3.使用动画 * * 传媒学院 animation是一个简写属性,用于设置以下6个属性animation-name动画名称animation-duration持续时间animation-timing-function动画的速度曲线,比如线性linearanimation-delay动画延迟,就是多久后开始播放动画animation-iteration-count动画次数,1表示1次,infinite表示无数次animation-direction动画是否在下一周期逆向地播放,默认是normal,即不, alternate 表示交替 4.animation属性值 * * 传媒学院 animation例子animation : myfirst 5s linear 2s infinite alternate;

表示动画名称是myfirst;

持续5s;

linear线性速度播放(动画从头到尾的速度是相同的);

延迟2秒后开始播放;

infinite无限重复播放;

交替播放(相邻两个周期的播放过程相反) 也可以单独设置animation-timing-function: easeease:默认效果,动画以低速开始,然后加快,在结束前变慢表示Q:-webkit-animation: myfirst 3s;

这是什么效果? * * 传媒学院 例子@keyframes myfirst { 0% {background: red;

left:0px;

top:0px;

} 25% {background: yellow;

left:200px;

top:0px;

} 50% {background: blue;

left:200px;

top:200px;

} 75% {background: green;

left:0px;

top:200px;

} 100% {background: red;

left:0px;

top:0px;

} }定义了5个关键帧 5.更多关键帧定义 * * 传媒学院 制作简单的动画logo,如下Logo图片在logo区域左右移动并旋转,且背景颜色不断变化 6.练习 * * 传媒学院 要定义两个动画,一个是给div用的,改背景颜色@keyframes myfirst { 0% {background: red;

} 20% {background: green;

} 40% {background: blue;

} 60% {background: yellow;

}80% {background: #00ffff;

}100% {background: purple;

}} * * 传媒学院 另一个是给图片用的,通过改变左边界大小让图片平移,并通过转换的rotate方法旋转@keyframes mysecond { 0% {margin-left:0px;

transform: rotate(0deg);

} 20% {margin-left:140px;

} 40% {margin-left:280px;

} 60% {margin-left:420px;

}80% {margin-left:560px;

}100% {margin-left:750px;

transform: rotate(360deg);

}} * * 传媒学院 为什么只用定义两个关键帧的旋转? 使用动画animation : myfirst 10s linear 0s infinite alternate;

* * 传媒学院 Q:-webkit-animation是干什么用的? 在一个带框的div中放置一个球,该球在div框中按W轨迹运动,且运动中会变色 作业 * * 传媒学院