What I'm looking for is my marquee to start at the beginning of the looped element; go all the way until the element scrolls off of the screen, then start at the beginning of the element.
Now, the element does get all the way to the end. It does start up immediately once the element disappears. But when it starts it either starts the element half way through, or if the browser is in a small state, it'll take a little while for it to start.
.marquee {
height: 60px;
width: 100%;
overflow: hidden;
/*position: relative;*/
}
.marquee div {
display: block;
width: fit-content;
height: 30px;
padding-bottom: 15px;
position: absolute;
overflow: hidden;
white-space: nowrap;
animation-name: marquee;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee div:hover {
animation-play-state: paused
}
#keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
<html>
<body>
<div class="marquee">
<div>
<p>Some text. Some more text. It's times like these that try mens hearts. We strive to succeed. With hard work, we will. Here will be some various lines to stuff.</p>
</div>
</div>
</body>
</html>
Well, here's what got it to work for me.
<html>
<body>
<style>
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
.marquee div {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation-name: animate_the_marquee;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee div:hover {
animation-play-state: paused
}
#keyframes animate_the_marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<div>Some text. Some more text. It's times like these that try mens hearts. We strive to <span style="color:green">succeed</span>. With hard work, we will. Here will be some various lines to stuff.</div>
</div>
</body>
</html>
HTML
<html>
<body>
<div class="marquee">
<div>
<p>Some text. Some more text. It's times like these that try mens hearts. We strive to succeed. With hard work, we will. Here will be some various lines to stuff.</p>
</div>
</div>
</body>
</html>
CSS
.marquee {
height: 60px;
width: 100%;
overflow: hidden;
position:relative;
}
.marquee div {
display: block;
width: fit-content;
height: 30px;
padding-bottom: 15px;
position: absolute;
overflow: hidden;
white-space: nowrap;
animation-name: marquee;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee div:hover {
animation-play-state: paused
}
#keyframes marquee {
0% {
transform: translateX(5%);
}
100% {
transform: translateX(-100%);
}
}
Related
My circle animation looks stretched out? How can I make the circle not look elongated in the x axis? It stretches out during the animation and then returns back to normal after the animation has finished.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
Well, you are animating your width from 300% to 100%. Removing this will fix it.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
I'd like my animation don't make a blank, when the first letter is overflow to left, I want it come back to right immediatly. How can I do ?
.stream_text {
position: absolute;
padding-left: 100%;
white-space: nowrap;
font-size: 30px;
text-transform: uppercase;
animation: stream 5s linear infinite;
}
#keyframes stream {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
<div class="stream_text">Hello World</div>
Thanks
Overflow:hidden;
It will allow it to show and not be blank
I found a solution based to this answer.
Add a second text with the same animation but with a delay.
Here my final code :
.stream_text {
position: absolute;
top: 20vh;
padding-left: 100%;
font-size: 20vh;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
color: #f78725;
animation: stream 5s infinite linear;
}
.stream_text-delay {
color: #7818d9;
animation-delay: 2.5s;
}
#keyframes stream {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-130%);
}
}
<div class="stream_text">Hello World</div>
<div class="stream_text stream_text-delay">Hello World</div>
Thanks !
I have 2 images with transparent background and need to put one on top of each other with the same positioning:
1 spinning (underneath)
1 fixed (above)
I need to have the whole image composition to be centered and to have its size adjusted depending on the window size.
I used an ::after pseudo element for the fixed one but couldn’t get its position and size to follow the spinning one.
I suppose the background-size property should be involved but didn’t manage to use it properly.
Would appreciate any advice, even if it involves going with a totally different approach than the ::after pseudo class.
Many thanks.
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: absolute;
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
Something like this?
EDIT: Instead of setting the image as a background using the ::after pseudo-class, I added the fixed image into the html. I also eliminated one of your containers.
I centred the animated image using text-align:center and centred the fixed image using position: absolute
I set both images to 30% width relative their parent .engine-container
The fixed image has a higher z-index than the animated image so that it always appears over it. The images also change size accordingly, relative to window size.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container {
text-align: center;
position: relative;
}
.engine-rotating,
.engine-fixed {
width: 30%;
}
.engine-fixed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
<img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
</div>
</div>
UPDATE
Heres what I came up with:
A similar effect using ::after. I was able to achieve this by inserting the image url into the content: rule, rather than setting a background image.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
text-align: center;
position: relative;
}
.engine-rotating{
}
.engine-container::after{
content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin{
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin{
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
</div>
</div>
Set position for .engine-complete::after to relative
.engine-complete::after {position: relative}
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: relative; /* this was changed */
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
I am trying to add a marquee effect with CSS3 animation in Wordpress as it doesn't support the <marquee> tag. I would like to get rid of the white space in between each loop. I tried using nowrap but it doesn't work.
#keyframes marquee {
0% {
text-indent: 430px
}
100% {
text-indent: -485px
}
}
#-webkit-keyframes marquee {
0% {
text-indent: 430px
}
100% {
text-indent: -485px
}
}
.marquee {
font-size: 50px;
overflow: hidden;
white-space: nowrap;
animation: marquee 12s linear infinite;
-webkit-animation: marquee 12s linear infinite;
}
.marquee:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
<p class="marquee">
<a href="#">
SOON SOON SOON SOON SOON SOON SOON </a></p>
Link here: http://www.houseofbase.fr/preview/wordpress/comingsoon/
Something like this do what you want.
.marquee {
width: 100%;
height: 80px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
margin-top: 5px;
animation: marquee 10s linear infinite;
}
.item-collection-1 {
position: relative;
left: 0%;
animation: swap 10s linear infinite;
}
#keyframes swap {
0%, 50% {
left: 0%;
}
50.01%,
100% {
left: 100%;
}
}
.marquee-content:hover {
animation-play-state: paused
}
.item1 {
display: inline-block;
height: auto;
width: 500px;
background: cyan;
vertical-align: top;
margin-left: 15px;
}
.item2 {
display: inline-block;
height: auto;
width: 500px;
background: magenta;
vertical-align: top;
margin-left: 15px;
}
/* Transition */
#keyframes marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-100%)
}
}
<div class="marquee">
<div class="marquee-content">
<span class="item-collection-1">
<span class="item1">soon soon soon soon soon soon soon soon soon soon soon soon soon soon</span>
<span class="item1">soon soon soon soon soon soon soon soon soon soon soon soon soon soon</span>
</span>
<span class="item-collection-2">
<span class="item2">soon soon soon soon soon soon soon soon soon soon soon soon soon soon</span>
<span class="item2">soon soon soon soon soon soon soon soon soon soon soon soon soon soon</span>
</span>
</div>
<div>
It is not a good idea to using text-indent for transform. Use this instead of your animation:
#keyframes marquee {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100vw);
}
}
#-webkit-keyframes marquee {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100vw);
}
}
#keyframes marquee {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100vw);
}
}
#-webkit-keyframes marquee {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100vw);
}
}
.marquee {
font-size: 50px;
overflow: hidden;
white-space: nowrap;
animation: marquee 12s linear infinite;
-webkit-animation: marquee 12s linear infinite;
}
.marquee:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
<p class="marquee">
<a href="#">
SOON SOON SOON SOON SOON SOON SOON </a></p>
Don't know if i understand but try use margin-left negative like:
.marquee a{ margin-left: -50%; }
.marquee {
width: 100%;
height: 80px;
margin: 0 auto;
overflow: hidden;
display: inline-grid;
}
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}