I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
I want to make three circle spinners spinning around the text and the text inside these spinners will stay still.
I am only allowed to do this with CSS by referring to the .spinner-border in Bootstrap. The HTML file cannot be modified.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
left: auto;
top: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I have tried to make one spinner first. But I don't know how to make the text stay still.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
top: 5px;
left: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 100%;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I have created a loader in css with three bars, the code is as given below. The bars are based on :before and :after. But if I want a five bar loader how can I do that ?
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
</div>
You could use the CSS propriety ntnchild. Your HTML and CSS will be like:
.loading-bar {
display: inline-block;
width: 4px;
height: 18px;
border-radius: 4px;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
background-color: #3498db;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
background-color: #f1c40f;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;
}
.loading-bar:nth-child(5) {
background-color: #000000;
animation-delay: .36s;
}
#keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
<div class="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
You can do this easily with only one element and gradient. You simply need to control the background-size to have the needed animation
.loader {
width: 70px;
height: 4em;
margin: 10px auto;
background-image:
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black);
background-size:10px 100%;
background-position:
0 50%,
15px 50%,
30px 50%,
45px 50%,
60px 50%;
background-repeat:no-repeat;
animation:load 2s infinite linear;
}
#keyframes load{
0% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
15% {
background-size:10px 50%,10px 100%,10px 100%,10px 100%,10px 100%;
}
30% {
background-size:10px 80%,10px 50%,10px 100%,10px 100%,10px 100%;
}
45% {
background-size:10px 100%,10px 80%,10px 50%,10px 100%,10px 100%;
}
60% {
background-size:10px 100%,10px 100%,10px 80%,10px 50%,10px 100%;
}
75% {
background-size:10px 100%,10px 100%,10px 100%,10px 80%,10px 50%;
}
90% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 80%;
}
100% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
}
<div class="loader"></div>
You should be use this killer way.
Please add new class like: <div class="loader more">Loading...</div>
And give this type of css:
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
Hope this help.
Let me know further clarification.
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
<div class="loader more">Loading...</div>
</div>
I just tried, i don't know this is a perfect solution.
.loader,
.loader1,
.loader:before,
.loader1:before,
.loader:after
{
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader,.loader1 {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader1:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before, .loader1:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader
{
position: relative;
left: 30px;
top: -45px;
}
<div class="loader-wrapper">
<div class="loader1">Loading...</div>
<div class="loader">Loading...</div>
</div>
I have create loader using six bar. Using CSS you target specific div for delay in animation. As #João Pedro Schmitz suggest use nth-child CSS selector for selecting div. I give a space of 10px after every div and start the animation of each div with delay .12s.
/* This provide animated ajax loading image. */
.animatedBox {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.animatedBox div {
display: inline-block;
position: absolute;
left: 6px;
width: 6px;
background: #fff;
animation: animatedBox 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.animatedBox div:nth-child(1) {
left: 20px;
animation-delay: -0.60s;
}
.animatedBox div:nth-child(2) {
left: 30px;
animation-delay: -0.48s;
}
.animatedBox div:nth-child(3) {
left: 40px;
animation-delay: -0.36s;
}
.animatedBox div:nth-child(4) {
left: 50px;
animation-delay: -0.24s;
}
.animatedBox div:nth-child(5) {
left: 60px;
animation-delay: -0.12s;
}
.animatedBox div:nth-child(6) {
left: 70px;
animation-delay: 0;
}
#-webkit-keyframes animatedBox {
0% {
top: 0px;
height: 30px;
background: #333;
}
50%,100% {
top: 0px;
height: 10px;
background: #333;
}
}
#keyframes animatedBox {
0% {
top: -11px;
height: 45px;
background: #333;
}
50%,100% {
top: 0px;
height: 25px;
background: #333;
}
}
<div class="animatedBox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
How can I adjust the width of how long the <hr class="content-divider"> is but I need it to be responsive. I don't want the line to go past from where the buttons on each side end.
My site code.
Here is the html to the line divider.
<hr class="content-divider">
Update css part
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
position:relative; /*Add this*/
left:0px; /*Add this*/
right:0px; /*Add this*/
margin: 20px auto; /*Add this you can change as your need*/
max-width:70%; /*Add this*/
}
Working fiddle - fiddle link
body {
background-color: #1b1b1b;
}
#app {
display: none;
}
#splash {
margin: 200px auto;
}
#splash span {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
position: absolute;
left: 50%;
margin-left: -10px;
-webkit-animation: 3s infinite linear;
-moz-animation: 3s infinite linear;
-o-animation: 3s infinite linear;
}
#splash span:nth-child(2) {
background: white;
-webkit-animation: kiri 1.2s infinite linear;
-moz-animation: kiri 1.2s infinite linear;
-o-animation: kiri 1.2s infinite linear;
}
#splash span:nth-child(3) {
background: white;
z-index: 100;
}
#splash span:nth-child(4) {
background: white;
-webkit-animation: kanan 1.2s infinite linear;
-moz-animation: kanan 1.2s infinite linear;
-o-animation: kanan 1.2s infinite linear;
}
#-webkit-keyframes kanan {
0% {
-webkit-transform: translateX(20px);
}
50% {
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(20px);
z-index: 200;
}
}
#-moz-keyframes kanan {
0% {
-moz-transform: translateX(20px);
}
50% {
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(20px);
z-index: 200;
}
}
#-o-keyframes kanan {
0% {
-o-transform: translateX(20px);
}
50% {
-o-transform: translateX(-20px);
}
100% {
-o-transform: translateX(20px);
z-index: 200;
}
}
#-webkit-keyframes kiri {
0% {
-webkit-transform: translateX(-20px);
z-index: 200;
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(-20px);
}
}
#-moz-keyframes kiri {
0% {
-moz-transform: translateX(-20px);
z-index: 200;
}
50% {
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(-20px);
}
}
#-o-keyframes kiri {
0% {
-o-transform: translateX(-20px);
z-index: 200;
}
50% {
-o-transform: translateX(20px);
}
100% {
-o-transform: translateX(-20px);
}
}
.n2j-loading-video {
width: 60px;
height: 60px;
margin: auto;
border-color: white transparent white transparent;
border-width: 5px;
border-style: solid;
animation: loading 1s ease infinite;
position: fixed;
border-radius: 50%;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body,
html {
width: 100%;
height: 100%;
}
.header1 {
text-align: center;
color: #f8f8f8;
}
.header-content>h1 {
font-size: 5rem;
font-family: sans-serif;
font-weight: 700;
margin: 0;
}
.header-content>h3 {
font-size: 3rem;
font-family: sans-serif;
font-weight: 400;
margin: 0;
}
.header-content {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
position: relative;
left: 0px;
right: 0px;
margin: 20px auto;
max-width: 70%;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #f8f8f8;
color: #f8f8f8;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open>.dropdown-toggle.btn-primary {
color: #f7ca18;
border-color: #f7ca18;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #f7ca18;
color: #f7ca18;
box-shadow: none;
}
ul.intro-social-buttons li {
padding-bottom: 10px;
}
<script>
setTimeout(function() {
document.getElementById('app').style['display'] = 'block';
document.getElementById('splash').style['display'] = 'none';
}, 3000);
</script>
<!--The script above is placed in head within my code-->
<body>
<div id="splash">
<div class='n2j-loading-video'></div>
</div>
<div id="app">
<div class="header1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-content">
<h1 class="maintxt rotateInUpLeft animated">LIAM DOCHERTY</h1>
<h3 class="subtxt rotateInUpLeft animated">WEB DEVELOPER & GRAPHIC DESIGNER</h3>
<hr class="content-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<script src="js/javascript.js"></script>
</body>
</html>
I want to rotate the inner circle when hover over outer circle, its works fine if I don't apply animation to it. But if I apply animation, inner circle does not rotate on hover. My animation makes inner circle rotate once only.
body, html {
height: 100%;
}
.main-content {
position: relative;
height: 100%;
}
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-container ul {
list-style: none;
}
.box-container .box {
display: inline-block;
height: 100px;
width: 100px;
background: pink;
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
}
.box-container .box span {
transform-origin: 0% 0%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
display: block;
width: 40px;
height: 40px;
background: #58C9B9;
color: #fff;
line-height: 40px;
text-align: center;
transform-origin: calc(100% - 20px) calc(100% - 20px);
}
.box-container .box:hover span {
background: #4F86C6;
transform: rotateY(360deg);
transition: .5s;
}
.animate1 {
animation: animate .5s ease-in-out forwards;
}
.animate2 {
animation: animate .5s ease-in-out .5s forwards;
}
.animate3 {
animation: animate .5s ease-in-out 1.0s forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(0deg);
}
100% {
opacity: 1;
transform: rotateY(360deg);
}
}
<div class="main-content">
<div class="box-container">
<ul class="list-unstyle list-inline">
<li class="box "><span class="animate1">20%</span></li>
<li class="box "><span class="animate2">40%</span></li>
<li class="box "><span class="animate3">50%</span></li>
</ul>
</div>
</div>
<div>
Remove property forwards from animation-fill-mode and then it works fine, as below.
animation-fill-mode:forwards - After the animation ends,
the animation will apply the property values for the time the animation ended.
Over-here animation ends at 360deg when using forwards.
Update -
And in your case you need to use forwards just to fade-in span tag i.e. from opacity 0 to 1, so for that you can declare two different animation.
body, html {
height: 100%;
}
.main-content {
position: relative;
height: 100%;
}
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-container ul {
list-style: none;
}
.box-container .box {
display: inline-block;
height: 100px;
width: 100px;
background: pink;
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
}
.box-container .box span {
transform-origin: 0% 0%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
display: block;
width: 40px;
height: 40px;
background: #58C9B9;
color: #fff;
line-height: 40px;
text-align: center;
transform-origin: calc(100% - 20px) calc(100% - 20px);
opacity:0;
transform:rotate(0deg);
}
li:nth-child(1):hover > .animate1{
transition:.5s ease;
transform:rotateY(360deg);
}
li:nth-child(2):hover > .animate2{
transition:.5s ease;
transform:rotateY(360deg);
}
li:nth-child(3):hover > .animate3{
transition:.5s ease;
transform:rotateY(360deg);
}
.animate1{
animation: animate .5s ease-in-out, opty .5s ease-in-out forwards;
}
.animate2 {
animation: animate .5s ease-in-out .5s, opty .5s ease-in-out forwards .5s;
}
.animate3 {
animation: animate .5s ease-in-out 1.0s, opty .5s ease-in-out forwards 1s;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(0deg);
}
100% {
opacity: 1;
transform: rotateY(360deg);
}
}
#keyframes opty {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="main-content">
<div class="box-container">
<ul class="list-unstyle list-inline">
<li class="box "><span class="animate1">20%</span></li>
<li class="box "><span class="animate2">40%</span></li>
<li class="box "><span class="animate3">50%</span></li>
</ul>
</div>
</div>
<div>
I think the problem is with your animation property .I'm edited it and it's working fine.I'm added the snippet below.
body, html {
height: 100%;
}
.main-content {
position: relative;
height: 100%;
}
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-container ul {
list-style: none;
}
.box-container .box {
display: inline-block;
height: 100px;
width: 100px;
background: pink;
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
}
.box-container .box span {
transform-origin: 0% 0%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
display: block;
width: 40px;
height: 40px;
background: #58C9B9;
color: #fff;
line-height: 40px;
text-align: center;
transform-origin: calc(100% - 20px) calc(100% - 20px);
}
.box-container .box:hover span {
background: #4F86C6;
transform: rotateY(360deg);
transition: .5s;
}
.animate1 {
animation: animate .5s ease-in-out 1;
}
.animate2 {
animation: animate .5s ease-in-out .5s;
}
.animate3 {
animation: animate .5s ease-in-out 1s;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(0deg);
}
100% {
opacity: 1;
transform: rotateY(360deg);
}
}
<div class="main-content">
<div class="box-container">
<ul class="list-unstyle list-inline">
<li class="box "><span class="animate1">20%</span></li>
<li class="box "><span class="animate2">40%</span></li>
<li class="box "><span class="animate3">50%</span></li>
</ul>
</div>
</div>
<div>