[英]Marquee with Css3 Animation
i have some problems with my marquee , i need to make it pure css and css3 . 我的选框有一些问题,我需要使其纯css和css3。 so i almost do it , but some errors show up .
所以我几乎做到了,但是出现了一些错误。 take alook
看一看
http://codepen.io/anon/pen/pJvqLL http://codepen.io/anon/pen/pJvqLL
my CSS : 我的CSS:
.cssmarquee {
height: 25px;
width: 100%;
overflow: hidden;
position: relative;
background-color:red;
}
.cssmarquee div {
width: auto;
height: 30px;
position: absolute;
animation: cssmarquee 5s linear infinite;
background-color:blue;
color: #FFF;
}
.cssmarquee div:hover {
animation-play-state: paused;
}
@keyframes cssmarquee {
0% { left: 100%; }
100% { left: -100%; }
}
.cssmarquee div
not a fixed width . .cssmarquee div
的宽度不是固定的。 so i can`t pass his fixed width to the @keyframe 100% { left: ???? Maybe instead of left
your could use transform
. 也许您可以使用
transform
而不是left
。 Like this example 像这个例子
@keyframes cssmarquee {
100% { transform: translateX(-100%); }
}
UPDATE : Look at this example for left to right. 更新 :从左到右查看此示例 。 I updated this style:
我更新了此样式:
.cssmarquee div {
width: 100%;
transform:translateX(100%);
}
I gave it a width of 100% and set the default transform to 100% 我将其宽度设置为100%,并将默认转换设置为100%
UPDATE 2: 更新 2:
Look at this example . 看这个例子 。 It returns to using
left
instead of transform
and also uses width:auto
它返回到使用
left
而不是transform
并且还使用width:auto
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.