I have a paragraph on my site, off which I want certain words to pulse with animate.css. I have successfully added animate.css to my site, however, when I try to add it to my span class, it is not working. I did some research and it seems like you have to add a display to the span, since animate.css doesn't work if if the display is not working. Here's my code:
.animatespan {
display: -moz-inline-stack;
display: inline-block !important;
zoom: 1;
vertical-align: top;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<h1>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse animatespan">pulsing word.</span>
</h1>
You only need to say inline-block the code was working expected it's just that it was pulsing once and then stopping.
Adding infinite means it will keep repeating the animation.
You can read the documentation here.
.animatespan {
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<h1>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word.</span>
</h1>
From what I understand it's because the span isn't displayed inline-block;
so you would need to do the following:
.animatespan {
display: -moz-inline-stack;
zoom: 1;
vertical-align: top;
}
h1 span {
display:inline-block;
}
Here is a working example:
https://jsfiddle.net/8ea9armk/1/
i've added an extra css class named animated, which will make the pulse run on an infinite loop.
Related
I am running into this Safari problem where space of an absolute positioned <span> isn't recognized in Safari. It works perfect in both Opera and Chrome.
I have no idea how to solve this. I tried all kind of height calc combinations. Here is the code:
<h1>
<span>
<span class="rw-words rw-words-1>Sentence with three long words
</br>
<span class="">Rotating word 1</span>
<span class="">Rotating word 2</span>
</span>
</h1>
<div>A lot of additional text</div>
Here is the css:
.rw-words-1 span{
animation: rotateWordsFirst 8s linear infinite 0s;
}
#keyframes rotateWordsFirst {
0% { opacity: 0; animation-timing-function: ease-in; }
2% { opacity: 1; }
40% { opacity: 1; }
53% { opacity: 0; }
100% { opacity: 0; }
}
.rw-words{ }
.rw-words span{
position: absolute;
opacity: 0;
color: #6b969d;
}
.rw-words span:nth-child(2) {
animation-delay: 4s;
color: #6b889d;
}
So there is a three word sentence and below there are two absolute positioned words which change from on into the other (rotating words animation).
The problem is that the "more text" below begins after Sentence 1 and is therefore overlapping the "Rotating words" in Safari while chrome and firefox puts it correctly below the Rotating words.
A fixed height of the h1 container doesn't work because "sentence 1" wraps a lot.
So basically I need to set the height of the h1 or span correctly.
The height has to be
width: fit-content;
plus one line-height to account for the absolute spans. But I can't find a way to make that work in css.
I am not very experienced and the solution might be simple.
best regards
Martin
UPDATE Feb 8th 2023 based on replies:
I found a simple solution which works.
I simply added the div right under the absolute spans and added relative position and top margin of 1.5em.
You have errors in your HTML.
You forgot to close the attribute value in your <span> with the class rw-words rw-words-1.
<br> has no closing tag. You can either write it as an open tag or you can close it where you opened it <br />, but you can't close it like this </br>
Try it like this:
<h1>
<span>
<span class="rw-words rw-words-1">Sentence with three long words
<br>
<span class="">Rotating word 1</span>
<span class="">Rotating word 2</span>
</span>
</h1>
<div>A lot of additional text</div>
css code:
.container .elements:active{
animation: click 1s;
}
/*animations */
#keyframes click{
0%{border:solid;
border-color: white;
height: 100%;}
50%{border:solid;
border-color: blue;
height:50%}
100%{border:solid;
border-color: white;
height: 100%;}
}
When i do this, it doesn't show the entire 1s of animation if i release the mouse button, how can i do to show the entire animation if the use click?
A simple fun way is using checkbox states;
<div class='container'>
<input id='check' type='checkbox'/>
<label class='elements' for='check'>aaaa</label>
</div>
with css;
#check:checked~ .elements{animation: click 1s;}
input{display: none;}
This is really easy but not semantically correct.
The real answer:
html;
<div class='container'>
<div id='element1' onclick='ani()'>Element</div>
</div>
javascript;
<script type="text/javascript">
function ani(){
document.getElementById('element1').className ='animateclass';
setTimeout(function(){
document.getElementById("element1").classList.remove("animateclass");
}, 1000);
}
</script>
css;
.animateclass{animation: click 1s;}
I just want to basically show text and hide, then next text and hide, then last text and hide and repeat. How can I do this? I've been looking at code but I'm still lost. Any help is greatly appreciated!
My Code :
<style>
#myArea {
height:250px;
width:300px;
position:relative;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
It is fairly simple to achieve the effect that you are looking for. All that is needed is for you to place the images absolutely on top of each other and then add an animation which changes the opacity of the image (or its container) accordingly.
The key parts when animating multiple elements in a loop are to
make sure that the animation of the second and subsequent elements start after all the previous elements have completed their animation and
make sure all the previous elements stay in the final state until the other elements complete their animation (otherwise they will mess up the animation).
The first part can be achieved by using progressive animation-delay on elements while the second part is achieved by setting the #keyframes accordingly. Here, since there are 3 images, animation of each of them should be completed at 33% mark itself (because during the other 66%, the other 2 will be executing their animation). The state as at 33% should be maintained till 100%.
(If you have 4 images, it should complete at 25% and so on.)
#myArea {
height: 250px;
width: 300px;
position: relative;
}
.text {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */
}
.text:nth-of-type(2) {
animation-delay: 4s; /* this must start after first has faded-out */
}
.text:nth-of-type(3) {
animation-delay: 7s; /* this must start after second has also faded-out */
}
#keyframes fade-in-out {
0% {
opacity: 0;
}
11%, 22% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}
<div id="myArea">
<img src="http://lorempixel.com/300/250/abstract/2" />
<div id="txt1" class="text">
<img src="http://lorempixel.com/200/200/animals/1" />
</div>
<div id="txt2" class="text">
<img src="http://lorempixel.com/200/200/animals/2" />
</div>
<div id="txt3" class="text">
<img src="http://lorempixel.com/200/200/animals/3" />
</div>
</div>
Are you probably looking for the steps timing-function? It provides a gif-like way to animate an image set!
there is an example: https://jsfiddle.net/simurai/CGmCe/
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
Hope it helps!
I incorporated Bootstrap on my site to make it responsive. I also added in CSS animation to my code. However, this takes the text from being in the center of the page, to starting on the far left of the page, finishing the animation, and then shifting the text to the center.
How do I start the animation in the center itself?
Bootstrap Code:
<header id="top" class="header">
<div class="text-vertical-center">
<h1 class="typing">Hi, welcome to my website.</h1>
<h3 class="typing">Let's get started.</h3>
<br>
Let's Get Started.
</div>
</header>
CSS Code:
.css-typing
{
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(50, end)1;
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Any thoughts or help would be awesome.
Thanks!
I have a sentence composed of multiple span elements:
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
When a span gets clicked (:active), I want it to have an increased font but without moving the elements around it horizontally.
Idle
Second word :active
I don't want any Javascript involved (to compute the :active width of the element, or some hack like this), only CSS. A solution would be to add right/left padding by default and suppress it when a word is :active, but it doesn't work for all word lengths: http://jsfiddle.net/Ampwt/1/
Any idea of how I could achieve this?
Apply width and height to your span. Please see sample css.
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
width: 170px;
height:30px;
}
.sentence span:active {
font-size:2em;
}
Use transform: scale(): http://jsfiddle.net/Ampwt/2/.
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
<br />
<span class="sentence">
<span>First</span>
<span>very long word</span>
<span>third.</span>
</span>
CSS:
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
padding:0 1em;
}
.sentence span:active {
-webkit-transform: scale(2);
transform: scale(2);
}