how to make wave animation?

how to make wave animation? - javascript

I want to make a wave. There is sample animation that i made. so i want to change this animation like this. there is number of rectangles. Expanding both sides of the rectangle
What i want to do is this time rectangle is expanding both sides(Up & down sides) but i want to expand only on side(up side) like music player.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50%{
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Just set the transform-origin of the span to bottom center(default is center center).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
transform-origin: bottom center;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50% {
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Related

changing the width of h1

I have this code below that allows the text to fade in nicely. However, as you can see when I run it below, it doesn't show the entire text specified in the h1. So i am a little confused on how to fix this, because looking at the css, it is not specifying where the width of the div or h1 actually is.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>
does anybody have any ideas how to possibly fix this?

This has nothing to do with the width of the h1, but with your CSS animations: You are defining fade-ins for 10 spans, but you have 12 of them, so the 11th and 12th remain invisible - see below, where I added selectors for them to the rule for the 10th child span:
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10),
.container h1 span:nth-child(11),
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>

You did not include enough :nth-child elements in your animation. I changed the last one you had, I believe was 10, to the proper number -> 12.
I figured this out by inspecting the browser inspector and looking at how many span tags were being created by your JS function. I then went back and replaced the last span CSS animation from 10 to 12 and worked backward down the line changing each one down the line...
I also added the proper amount of animations and animation duration for 5, 6 and 7 respectively though you may want to play around with those on your end.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.3s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: .7s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(6) {
animation-delay: .9s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(7) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(11) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(10) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>

can I attach an anchor tag on a span text using javascript

How can I open up a link when I click on the span items. This is what I have done
https://codepen.io/errors101/pen/LYNezVv?editors=1100
I don't want to put anchor tag inside every span element instead I want to use onClick to edit the html to insert a link only when someone clicks on it.
How can I do this ?
nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
text-decoration: none;
color: #000;
position: relative;
font-size: 2rem;
font-weight: 600;
letter-spacing: 4px;
}
.link:after {
content: "";
/* display:block; */
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #2987FF;
transition: width .18s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}
.link:hover:after {
width: 100%;
left: 0;
}
#-webkit-keyframes colours1 {
0% {
color: #00f;
}
50% {
color: #0f0;
}
75% {
color: #000;
}
100% {
color: #f00;
}
}
#-webkit-keyframes colours2 {
0% {
color: red;
}
50% {
color: green;
}
75% {
color: black;
}
100% {
color: blue;
}
}
#-webkit-keyframes colours3 {
0% {
color: purple;
}
50% {
color: yellow;
}
75% {
color: violet;
}
100% {
color: black;
}
}
#-webkit-keyframes colours4 {
0% {
color: orange;
}
50% {
color: black;
}
75% {
color: blue;
}
100% {
color: purple;
}
}
#a {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours1;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(3, end);
}
#b {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours2;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
#c {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours3;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
#d {
-webkit-animation-direction: normal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours4;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
em {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 4rem;
font-style: none;
font-weight: 600;
cursor: pointer;
}
<!-- <nav>
<a class="link" href="#">Portfolio</a>
</nav> -->
<em>
<spam id= "a">P</spam>
<spam id= "b">o</spam>
<spam id= "c">r</spam>
<spam id= "d">t</spam>
<spam id= "b">f</spam>
<spam id= "c">o</spam>
<spam id= "d">l</spam>
<spam id= "c">i</spam>
<spam id= "a">o</spam>
</em>

Something like this?
Note I had to change your ID to CLASS since you cannot reuse an ID
const linksObj = {
a: "https://google.com",
b: "https://msdn.com",
c: "",
d: "",
e: "",
f: "",
g: "",
h: "",
i: ""
}
document.querySelector("#links").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.tagName === "SPAN") {
location = linksObj[tgt.id]
}
})
nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
text-decoration: none;
color: #000;
position: relative;
font-size: 2rem;
font-weight: 600;
letter-spacing: 4px;
}
.link:after {
content: "";
/* display:block; */
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #2987FF;
transition: width .18s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}
.link:hover:after {
width: 100%;
left: 0;
}
#-webkit-keyframes colours1 {
0% {
color: #00f;
}
50% {
color: #0f0;
}
75% {
color: #000;
}
100% {
color: #f00;
}
}
#-webkit-keyframes colours2 {
0% {
color: red;
}
50% {
color: green;
}
75% {
color: black;
}
100% {
color: blue;
}
}
#-webkit-keyframes colours3 {
0% {
color: purple;
}
50% {
color: yellow;
}
75% {
color: violet;
}
100% {
color: black;
}
}
#-webkit-keyframes colours4 {
0% {
color: orange;
}
50% {
color: black;
}
75% {
color: blue;
}
100% {
color: purple;
}
}
.a {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours1;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(3, end);
}
.b {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours2;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.c {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours3;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.d {
-webkit-animation-direction: normal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours4;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
em {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 4rem;
font-style: none;
font-weight: 600;
cursor: pointer;
}
<em id="links">
<span id="a" class="a">P</span>
<span id="b" class="b">o</span>
<span id="c" class="c">r</span>
<span id="d" class="d">t</span>
<span id="e" class="e">f</span>
<span id="f" class="f">o</span>
<span id="g" class="d">l</span>
<span id="h" class="c">i</span>
<span id="i" class="a">o</span>
</em>
Clicking on portfolio to go to ONE link
const linksObj = {
portfolio: "https://google.com/search?q=portfolio",
about: "https://google.com/search?q=about",
contact: "https://google.com/search?q=about"
}
document.getElementById("container").addEventListener("click", function(e) {
let tgt = e.target;
if (tgt.parentNode.classList.contains("link")) tgt = tgt.parentNode; // allow one level up
if (tgt.classList.contains("link")) location = linksObj[tgt.id];
})
nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
text-decoration: none;
color: #000;
position: relative;
font-size: 2rem;
font-weight: 600;
letter-spacing: 4px;
}
.link:after {
content: "";
/* display:block; */
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #2987FF;
transition: width .18s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}
.link:hover:after {
width: 100%;
left: 0;
}
#-webkit-keyframes colours1 {
0% {
color: #00f;
}
50% {
color: #0f0;
}
75% {
color: #000;
}
100% {
color: #f00;
}
}
#-webkit-keyframes colours2 {
0% {
color: red;
}
50% {
color: green;
}
75% {
color: black;
}
100% {
color: blue;
}
}
#-webkit-keyframes colours3 {
0% {
color: purple;
}
50% {
color: yellow;
}
75% {
color: violet;
}
100% {
color: black;
}
}
#-webkit-keyframes colours4 {
0% {
color: orange;
}
50% {
color: black;
}
75% {
color: blue;
}
100% {
color: purple;
}
}
.a {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours1;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(3, end);
}
.b {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours2;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.c {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours3;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.d {
-webkit-animation-direction: normal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours4;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
em {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 4rem;
font-style: none;
font-weight: 600;
cursor: pointer;
}
<div id="container">
<em class="link" id="portfolio">
<span class="a">P</span>
<span class="b">o</span>
<span class="c">r</span>
<span class="d">t</span>
<span class="e">f</span>
<span class="f">o</span>
<span class="d">l</span>
<span class="c">i</span>
<span class="a">o</span>
</em>
<span id="about" class="link">About</span>
<p id="contact" class="link">contact</p>
</div>

How to stop loading animation after 2 seconds?

I want to make a loading screen and a fading up page like here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5. The problem is that I don't know how to end the loading loop and make that fading.
Codes
<body>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</body>
body {
background-color: #636e72;
}sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
#keyframes sk-chase {
100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}

You need the JavaScript that tells the browser when to hide the loader and show the content. See snippet below
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.querySelector("#loader").style.display = "none";
document.querySelector("#myDiv").style.display = "block";
document.querySelector("body").style.backgroundColor = "white";
}
body {
background-color: #636e72;
}
.sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: calc(50% - 20px);
left: calc(50% - 20px);
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
#keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1.0);
}
}
<body onload="myFunction()">
<div id="loader" class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
</body>

animation: sk-chase 2.5s infinite linear both;
Word infinite is your problem. Use a number of reps instead infinite. In your case is 1.

Timing text transition with pulsating rings

The goal is to have the text transition to 3 different words. I want them to be in sync with the animated rings(text change after every two rings animate fading in and fading out) I'm not sure what is the best way to set the timing for the rings and the text - should this be done with javascript or CSS animation keyframes? Below is a link to my codepen and HTML/CSS.
Codepen - https://codepen.io/pizzapgh/pen/RygPQJ
body {
background-color: gray;
}
#circles {
width: 1000px;
height: 1000px;
display: inline-block;
position: relative;
margin: auto;
border: 1px solid blue;
}
#circles div {
position: absolute;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
width: 0;
height: 0;
opacity: 0;
animation-name: growCircles;
animation-duration: 8s;
transition-timing-function: ease-out;
animation-iteration-count: infinite;
}
#circles div:nth-child(1) {
animation-delay: 0s;
}
#circles div:nth-child(2) {
animation-delay: 1s;
}
#circles div:nth-child(3) {
animation-delay: 2s;
}
#circles div:nth-child(4) {
animation-delay: 3s;
}
#circles div:nth-child(5) {
animation-delay: 4s;
}
#circles div:nth-child(6) {
animation-delay: 5s;
}
#keyframes growCircles {
0% {
top: 500px;
left: 500px;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
}
100% {
opacity: 0;
}
}
/*================================
Text Transition
================================== */
#spin:after {
content: "";
animation: spin 5s ease-in infinite;
}
#keyframes spin {
0% {
content: "From The Classroom";
}
60% {
content: "To the City";
}
100% {
content: "To the World";
}
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
color: white;
width: 500px;
overflow: hidden;
text-align: center;
font-family: 'RockwellMT' !important;
}
<div class="circle-container">
<div id="circles">
<h2 id="spin"></h2>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

is it possible to animate a text inside a textbox

My UX guy come up with a requirement to animate a text inside a text-box. i have this animation css class, when applied to a text-box animates the text-box. Thats how it should be.
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
i have created an example for reference
.login-wrongPassword {
-webkit-animation-name: login-wobble-horizontal;
animation-name: login-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
is is possible to animate only the text and not the text box itself. ??

Use CSS text-indent
.login-wrongPassword {
-webkit-animation-name: login-wobble-horizontal;
animation-name: login-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
text-indent: 8px;
}
33.3% {
text-indent: -6px;
}
49.95% {
text-indent: 4px;
}
66.6% {
text-indent: -2px;
}
83.25% {
text-indent: 1px;
}
100% {
text-indent: 0px;
}
}
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">

Yes. Use padding-left instead of transform
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
padding-left: 10px;
}
33.3% {
padding-left: 5px;
}
49.95% {
padding-left: 8px;
}
66.6% {
padding-left: 3px;
}
83.25% {
padding-left: 5px;
}
100% {
padding-left: 0;
}
}
JSFiddle
As Santi mentions, you can fix the right side by using 'box-sizing: border-box'

We Keep Coding

JavaScript is the programming language of the Web.

how to make wave animation? - javascript

Related

changing the width of h1

can I attach an anchor tag on a span text using javascript

How to stop loading animation after 2 seconds?

Timing text transition with pulsating rings

is it possible to animate a text inside a textbox

Categories

Resources