滚动公告的制作请参阅：Marquee标签实现跑马灯、滚动公告、通知效果
今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。
@keyframes规则
@keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
注释：当动画完成后，动画的状态会回到初始状态。
要改变这一点，可以设置 animation-fill-mode: forwards; 使动画完成后停留在最后一帧。
CSS3动画实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
/*注：下面的写法将不再写 -webkit- 和 -moz- */
或者用%表示时间段
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
把 “myfirst” 动画捆绑到 div 元素，时长：3 秒：
div{
animation: myfirst 3s;
}
其中animation有6个属性
- animation-name 规定 @keyframes 动画的名称
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
- animation-timing-function 规定动画的速度曲线。默认是 “ease” 。 4个属性：ease、ease-in、ease-out、ease-in-out
- animation-delay 规定动画何时开始。默认是 0
- animation-iteration-count 规定动画被播放的次数。默认是 1。 2个属性：n(次数，不填写即为1)和infinite（无限次）
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 2个属性：normal（正常循环播放，可不填）和alternate（结束后轮流反向播放）
所有属性可以合起来写
div {
animation: myfirst 5s linear 1s infinite alternate;
/*动画名称、动画时间5s、动画速度:匀速、延迟开始时间：1s、动画播放次数：无限次、动画完成后下一周期：轮流反向播放。*/
}
使用CSS3的@keyframes和animation 制作滚动文字公告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画——@keyframes animation|www.125jz.com</title>
<style>
.wrap{
width: 300px;
border: 1px solid #999;
margin: 200px auto;
background-color: #CCC;
overflow: hidden;
}
.wrapFont{
transform: translateX(0%);
animation: scrols 10s infinite linear;
}
@keyframes scrols{
from{
transform: translateX(100%);
}
to{
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrapFont">CSS动画——@keyframes animation</div>
</div>
</html>
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3312.html
微信扫一扫 
支付宝扫一扫