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;
}
Related
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 !
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 have this loader working fine.
CSS:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div *ngIf="somevalue" class="loader"></div>
Now I need put some text in center
but my try not working. How Can I let my loader like in second image? I dont want install more external components, md-progress-loader, md-circle...etc.. TRY IT
A very simple solution is to just place the text into another div and position it accordingly - something like
<div class="container">
<div class="loader"></div>
<div class="description">Text</div>
</div>
and
.description
{
position: absolute;
top:0;
left:0;
line-height:150px;
width:152px;
text-align:center;
}
.container
{
position:relative;
}
This counters the rotation and provides a roughly sane box in which other elements can be placed.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader div {
display: block;
animation: spin 2s linear infinite reverse;
position: relative;
height: 100%;
}
.loader div span {
display: inline-block;
text-align: center;
}
<div *ngIf="somevalue" class="loader"><div><span>testing lots of text in this text box</span></div></div>
So I'm looking to create a really basic snow effect.
I have a keyframe animation for the flake swaying side to side and moving down the Y axis. I want the element to retain the ending values using forwards. But I also want to then loop the animation (infinite), so that it continues where it left off.
HTML:
<div>
<figure class="small"></figure>
</div>
CSS:
div {
width: 100%;
height: 250px;
background: #184254;
}
figure {
border-radius: 50%;
}
#-webkit-keyframes snowfall {
25% {
transform: translateX(10px) translateY(20px);
}
75% {
transform: translateX(-10px) translateY(30px);
}
100% {
transform: translateX(0px) translateY(40px);
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowfall 2s ease-in-out forwards infinite;
}
http://codepen.io/mildrenben/pen/PwZdXB
You can use two animations, one to move right-left and other to make it fall.
The up to down animation will work with absolute positioning, so it will depend on body height (or its first parent with absolute or relative positioning).
figure {
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes snowside {
25% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
#-webkit-keyframes snowfall {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowside 2s ease-in-out forwards infinite, snowfall 15s ease-in-out forwards infinite;
}
http://codepen.io/anon/pen/YPwOMY
I am trying to implement a spinner only using CSS that looks like on following image, see the picture. Only one piece of the spinner is filled with color at a time.
In the following fiddle, there is a similar spinner, but I need to rotate the whole spinner (22.5°) and also to modify its rays.
http://jsfiddle.net/ucsnaukf/
HTML:
<div class="spinner"><div>Loading…</div></div>
CSS:
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.spinner {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: blue;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Can anyone help?
Here's a start for you (http://jsfiddle.net/ucsnaukf/73/):
<--! HTML -->
<div class="wrapper">
<div class="spinner">
<div>Loading…
</div>
</div>
<div class="circ"></div>
</div>
/* CSS */
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.wrapper{
border:1px solid white;
border-radius:100%;
position:relative;
width: 5em;
height: 5em;
border-radius:999px;
overflow:hidden;
}
/* Circular mask */
.circ{
border:1px solid WHITE;
position:absolute;
top:10%;
left:10%;
right:0;
bottom:0;
width:55%;
height:55%;
background-color:#fff;
border-radius:999px;
}
.spinner {
border:1px solid white;
border-radius:100%;/* Round the border */
position: absolute;
display: inline-block;
width: 5em;
height: 5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 1.8em; /* (container width - part width)/2 */
width: 1.4em; /* longer */
height: .8em; /* shorter */
background: #eee;
box-shadow: 0 4.2em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: purple;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Looks a bit flower like, but continue playing with it and you'll get it the way you want.
You may want to consider used one of the many, great looking, free to use spinners available on the web... check out this massive collection for example: http://codepen.io/collection/HtAne/