We Keep Coding

How to fade in and fade out text in loop

I want the text to fade in and fade out in the loop never stop it. like, come fade in then out again and again with HTML CSS. I'm going to share with you my code which just does fade in not do fade out and loop also not so anybody sees my code and told me how I can do that with HTML OR CSS because I want to use this animated type text on WordPress website with one build on the Elementor page builder. so please help. Thank You
.fade-in {
animation: fadeIn ease 10s;
-webkit-animation: fadeIn ease 10s;
-moz-animation: fadeIn ease 10s;
-o-animation: fadeIn ease 10s;
-ms-animation: fadeIn ease 10s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>

Use animation-direction and animation-iteration properties.
Combined into a shorthand, you get a property like : animation: fadeIn infinite alternate ease 2s
Change duration as necessary
.fade-in {
animation: fadeIn infinite alternate ease 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>

How to change how fast an element spins in CSS

So the element That I am manipulating has an id of spinning and a class of rotors
I can get my element to spin. I did this by using the css code here:
.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation:spin .5s linear infinite;
-moz-animation:spin .5s linear infinite;
animation:spin .5s linear infinite;
} #-moz-keyframes spin { 100% { -moz-transform:rotate(360deg);}}
#-webkit-keyframes spin { 100% { -webkit-transform:rotate(360deg);}}`
#keyframes spin { 100% { -webkit-transform:rotate(360deg);}}
But Say instead of it spinning automatically on the page load that I could press a button with an id of one and it would start to spin, and if I press a second button with an id of two, it would spin even faster then the first.
I am not sure how to achieve this. I did see where some people pointed out that you can change the css of an element using javascript but am unsure on how to achieve this especially on a button click. I want it to be something like getElementById(spinning).style.property = but on button click and just changing the speed of the rotation of my element.

One option would be to change the animation-duration CSS property dynamically with JavaScript.
var rotors = document.querySelector(".rotors");
function fast() {
rotors.style.animationDuration = ".2s";
}
function slow() {
rotors.style.animationDuration = ".5s";
}
.rotors {
height: 50px; /* for demo purpose */
width: 50px; /* for demo purpose */
animation: spin .5s linear infinite;
}
#keyframes spin {
100% { transform: rotate(360deg); }
}
<p>
<button onclick="fast()">Fast</button>
<button onclick="slow()">Slow</button>
</p>
<img class="rotors" src="https://cdn.onlinewebfonts.com/svg/img_489361.png" />

Add 2 buttons and use it to change the classes like below:
function startSpinning(){
var spDiv = document.getElementById('test');
if(spDiv.classList.contains('rotorsFast')){
spDiv.classList.remove('rotorsFast');
spDiv.classList.add('rotors');
}else{
spDiv.classList.add('rotors');
}
}
function startSpinningFast(){
var spDiv = document.getElementById('test');
if(spDiv.classList.contains('rotors')){
spDiv.classList.remove('rotors');
spDiv.classList.add('rotorsFast');
}else{
spDiv.classList.add('rotorsFast');
}
}
.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation: spin .5s linear infinite;
-moz-animation: spin .5s linear infinite;
animation: spin .5s linear infinite;
}
.rotorsFast {
position: relative;
top: 90px;
left: 30px;
-webkit-animation: spin .2s linear infinite;
-moz-animation: spin .2s linear infinite;
animation: spin .2s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
` #keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="test" style="width:20px">apple</div>
<button onclick="startSpinning()">spin</button>
<button onclick="startSpinningFast()">spin Fast</button>

This is a nice spot to use a CSS custom variable. When the button is clicked, we toggle a secondary class on the .rotors div. When the faster class is present, the custom variable resets the animation speed to the faster speed, which is automatically applied to the animation.
const rotors = document.querySelector('.rotors');
const btn = document.querySelector('.rotorButton');
btn.addEventListener('click', () => {
rotors.classList.toggle('faster')
});
.rotors {
--spin-speed: 2s; /* Initial speed */
position: relative;
top: 40px;
left: 30px;
background-color: yellow;
color: black;
display: inline-block;
animation: spin var(--spin-speed) linear infinite;
}
.rotors.faster {
--spin-speed: .5s; /* Faster speed 🔥 */
}
#keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="rotors">text</div>
<button class="rotorButton" type="button">Toggle Rotor Speed</button>
jsFiddle

SVG doesn't fill once the animation is over

My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over.
My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/
If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over.
Is there some way i can let it fill once the animation is over?
HTML:
<div class="photoshop">
<svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
</div>
CSS:
.photoshop {
height: 100px;
width: 100px;
opacity: 0;
}
.js-photoshop-animate{
opacity: 1;
}
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
100% {
stroke-dashoffset: 0;
}
}
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG finished * {
fill-opacity: 1;
}
JAVASCRIPT:
var $photoshop = $('.photoshop');
$photoshop.waypoint(function(){
console.log('Waypoint!');
$photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'} );
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});

Include multiple attributes in your animation, leave off the transition:
Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe:
If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
0% {
stroke-dashoffset: 27047;
fill-opacity: 0
animation-timing-function: ease-in-out
}
50% {
fill-opacity: 0
animation-timing-function: linear
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1
}
}

Begin SVG animation when it appears in viewport

I'm having a heck of a time trying to begin the animation when it appears in the viewport. I've searched through previously asked questions here on stack overflow, but I can't seem to figure how to adapt the JS to fit my needs. My latest attempt was to try and just make the pink line begin its animation when it appeared in the viewport... as I imagine once that works, I can apply to the rest of the items. Please let me know if you need anything else. Any ideas? codepen
SVG
<svg version="1.1" id="animate" class="animatedSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="792px" height="815px" viewBox="0 0 792 815" xml:space="preserve">
<path id="purple" class="purple-stroke purpleAnimation" d="M597.645,416.25c0,121.334-98.361,219.695-219.695,219.695"/>
<path id="green" class="green-stroke" d="M173.096,197.039c-58.343,54.482-94.817,132.087-94.817,218.211 c0,164.857,133.644,298.5,298.5,298.5"/>
<path id="red" class="red-stroke" d="M636.449,415.25c0,143.318-116.182,259.5-259.5,259.5c-143.318,0-259.5-116.182-259.5-259.5"/>
<path id="yellow" class="yellow-stroke" d="M585.398,201.588c55.557,54.209,90.051,129.907,90.051,213.662 c0,164.857-133.644,298.5-298.5,298.5"/>
<path id="pink" class="pink-stroke pinkAnimation" d="M376.949,77.25c26.421,0,52.134,3.031,76.81,8.766c149.667,34.779,261.19,168.983,261.19,329.234"/>
</svg>
CSS
.pink-stroke {
fill:none;
stroke:#E199C3;
stroke-width:40;
stroke-linecap:round;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
.pinkAnimation {
fill:none;
stroke:#E199C3;
stroke-width:40;
stroke-linecap:round;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
.purple-stroke{
fill:none;
stroke:#9E70B0;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.85s;
animation-delay:.85s;
}
.green-stroke{
fill:none;
stroke:#21B585;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: -1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:1.25s;
animation-delay:1.25s;
}
.red-stroke{
fill:none;stroke:#E9706C;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.85s;
animation-delay:.85s;
}
.yellow-stroke {
fill:none;
stroke:#EFEF99;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.45s;
animation-delay:.45s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
JS
var onAppear = [];
document.addEventListener("DOMContentLoaded", function() {
onAppear = [].map.call(document.querySelectorAll("#animate"), function(item ) {
return item;
});
}, false);
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
elem.classList.add(".pinkAnimation");
elem.classList.remove(".pink-stroke")
} else {
elem.classList.remove("pinkAnimation");
elem.classList.add ('.pink-stroke')
}
});
}, false);

I was able to figure this one out... I'm sure there are better options, but it works. I used the following script and updated the corresponding CSS styles to match. Here is the updated codepen.
JS
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
if (wScroll > $('#animate').offset().top - ($(window).height() / 1.2)) {
$("#pink").attr("class", "pink-stroke dash-pink");
$("#yellow").attr("class", "yellow-stroke dash-yellow");
$("#red").attr("class", "red-stroke dash-red");
$("#purple").attr("class", "purple-stroke dash-purple");
$("#green").attr("class", "green-stroke dash-green");
} else {
$("#pink").attr("class", "pink-stroke");
$("#yellow").attr("class", "yellow-stroke");
$("#red").attr("class", "red-stroke");
$("#purple").attr("class", "purple-stroke");
$("#green").attr("class", "green-stroke");
}
});

My subsequent div backgrounds don't show up if I put a text animation effect in a div

CSS3 for the animation where the idea is to fade in certain words on a continuous loop basis.
<style>
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words-1 h3{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-moz-animation: rotateWord 18s linear infinite 0s;
-o-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 h3:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.rw-words-1 h3:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
#keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; transform: translateY(-30px); }
5% { opacity: 1; transform: translateY(0px);}
17% { opacity: 1; transform: translateY(0px); }
20% { opacity: 0; transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
Animation ends
<div class="slideContainers" id="sC1">
1.Text-animation where h3 elements are supposed to fade in
<span class="demo4"> We do the
<div class="rw-words rw-words-1">
<h3>zumba</h3>
<h3>rumba</h3>
<h3>happiness</h3>
</div>
here. </span>
2. Text animation ends
</div><!-- sC1 ends -->
</div><!-- slide1 ends -->
3. Slide2 whose background goes invisible
<div id="slide2" class="slide" data-slide="2" data-stellar-background-ratio="0.5">
<div class="slideContainers" id="sC2">
<h1 class="pageTitle">About Us</h1>
<p id="aboutCopy" class="copy">When there's a lot on your plate, putting real good food, from real good ingredients, on the dinner table can be a hassle.<br>
But imagine if the easy answer to "What's for dinner?" was the better one for you. </p>
</div><!-- sC2 ends -->
</div><!-- slide2 ends -->

Tried without 0s at end ? i.e.g, animation: rotateWord 18s linear infinite; ? animation-delay property at post may not be positioned at correct order according to syntax guidelines
https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Syntax
Syntax
Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.