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 !
Related
Hello I want to have smooth typing animation in css but my code doesn't work smoothly
My text just appears on the screen suddenly
Here's my css code:
.title-text {
white-space: nowrap;
overflow: hidden;
animation: typing 4s steps(40) 1s 1 normal both;
}
#keyframes typing {
from {
width: 0;
}
to {
width: fit-content;
}
}
Thanks in advance
You have to pass specific width. The fit-content seems to be not working.
.title-text {
white-space: nowrap;
overflow: hidden;
animation: typing 4s steps(40) 1s 1 normal both;
}
#keyframes typing {
from {
width: 0;
}
to {
width: 200px;
}
}
Try this code
.title-text{
white-space: nowrap;
overflow: hidden;
animation: typing 1s steps(40) 1s 4 normal both;
}
#keyframes typing{
from{
width: 0;
}to{
width: 100px;
}
}
You can achieve this with transform: scaleX(n) where n transitions from 0 to 1:
.title-text{
white-space: nowrap;
overflow: hidden;
animation: typing .4s steps(40) 0s 1 normal both;
display:inline-block;
transform-origin:left;
}
#keyframes typing{
from{
transform: scaleX(0);
}to{
transform: scaleX(1)
}
}
<div class="title-text">This is the title</div>
Maybe you can try with this:
.title-text h1 {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
HTML:
<div class="title-text">
<h1>This is a Heading.</h1>
</div>
I am trying to typewrite 2 lines in CSS. My problem is that both lines are being written at the same time. I tried to use the animation-delay property but it does not work properly.
How can I type out the first line then type out the second line?
/*-----------------------LINE 1-----------------------*/
.line-1{
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
#keyframes typewriter{
from{width: 0;}
to{width: 9.5em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
animation-delay: 4s;
}
#keyframes typewriter{
from{width: 0;}
to{width: 15em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
/*-----------------------LINE 1-----------------------*/
.line-1, .line-2 {
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation: typewriter1 4s steps(44) 1s 1 normal both,
blinkTextCursor1 500ms steps(44) infinite normal;
}
#keyframes typewriter1 {
from {
width: 0;
}
to{
width: 9.5em;
}
}
#keyframes blinkTextCursor1 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter2 4s steps(44) 1s 1 normal both,
blinkTextCursor2 500ms steps(44) infinite normal;
animation-delay: 5s;
}
#keyframes typewriter2 {
from {
width: 0;
}
to {
width: 15em;
}
}
#keyframes blinkTextCursor2 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
I guess this is what you're looking for. My guess is that you defined 2 animatations with the same name and therefor you overwrite them. Also you needed to specify properties from .line-1 to .line-2
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%);
}
}
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;
}