body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: 123;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes 123 {
50% {
bottom: 10%;
}
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
Gone over it 3 times already, can't see where im messing up
try to use string instead of number in keyframes naming
here is your animation example. https://codepen.io/baomastr/pen/KKgNGbg
.circles {
height: 80px;
width: 80px;
border-radius: 50%;
border: solid;
position: absolute;
animation-name: test;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 5s;
}
#circle1 {
background: linear-gradient(45deg, #ccffff, #ffcccc);
left: 50%;
}
#circle2 {
background: repeating-linear-gradient(
90deg,
#a52a2a 2px,
#cccccc 5px,
orange 10px
);
left: 25%;
}
#keyframes test {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
1st is keyframe with number is not accepted. 2nd In you keyframe you need to specify 0% and 100% as well. To be for example like:
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
DEMO:
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: slidein;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
Related
I want to make an image slider of width:100% and height 365%
I tried this but its not working.`
<style>
.slide{
width: 100%;
height: 370px;
border: 2px solid orange;
animation-name: slide1;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes slide1{
0%{
/* background-color: orange; */
background-image: url("3.jpg");
}
25%{
background-image: url("a2.img");
}
75%{
background-image: url("a3.img");
}
100%{
background-image: url("a4.img");
}
}
</style>
and in the body If I add that much I hope that it should work
<body>
<div class="slide">
</div>
Try this.
I think you've missed animation-timing-function.
.slide {
width: 100%;
height: 370px;
border: 2px solid orange;
background-repeat: no-repeat;
background-size: contain;
animation-name: slide1;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes slide1 {
0% {
background-image: url("https://images.unsplash.com/photo-1633113215844-b2ddc0411724?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
25% {
background-image: url("https://images.unsplash.com/photo-1637709569303-f7cda15a4d3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
75% {
background-image: url("https://images.unsplash.com/photo-1637717256696-a0204d03a8fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
100% {
background-image: url("https://images.unsplash.com/photo-1633113215844-b2ddc0411724?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
}
<body>
<div class="slide"></div>
</body>
So I've got two custom mouse cursors that I'd like to keep at all times. The first cursor is a face, and the second is a face with an open mouth, it switches to the second one when the user clicks.
My problem is that when the user hovers over a certain object, like a div class, then the custom cursor disappears and it reverts to the default cursor.
How would I fix this problem?
The code for the cursor is in my CSS document.
Screenshots: https://i.imgur.com/P8ceHUo.jpeg, https://i.imgur.com/HSNLXpb.jpeg, https://i.imgur.com/VUd5BKx.jpg
body {
height: 100vh;
cursor: url('../images/cursor3.png'), auto;
background-image: url(../images/backgroundDonuts.jpg);
}
body:active {
height: 100vh;
cursor: url('../images/cursor3-eat.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="../images/donut-final.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="../images/donut-final.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="../images/donut-final.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="../images/donut-final.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="../images/donut-final.png"></label>
</div>
</section>
</body>
</html>
Below the CSS for my default cursor overrides I always use. I added your cursor as an example (can't test if it works, though), modify them to your needs as required.
/*****************************/
/* Global cursor preferences */
/*****************************/
body { cursor: default; cursor: url('../images/cursor3.png'), auto }
input { cursor: auto } /* Use a custom cursor, except on: */
input[list="datalist"],
input[type="button" ],
input[type="checkbox"],
input[type="radio" ],
input[type="color" ],
input[type="range" ],
input[type="reset" ],
input[type="file" ],
input[type="submit" ],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
You can use universal selector * to make it work on every :hover element (obviously you will need to just change url for yours):
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
DEMO (just click to see the active)
body {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
background-image: url('https://cdn.pixabay.com/photo/2020/01/14/10/55/cartoon-4764725_960_720.png');
}
body:active {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
section img{
max-width: 40px;
}
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
</section>
</body>
</html>
I have a Windows 10 Simulator script made mostly out of CSS Animations. I successfully created the color gradient but now I have no clue on how to do the next step.
Main HTML and CSS
<html>
<head>
<title>Windows 10 Simulator</title>
<link href="https://fonts.googleapis.com/
css?family=Noto+Sans|Open+Sans|PT+Sans|
Raleway|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<style onload>
html, body{
margin: 0;
padding: 0;
background-color: #000;
}
.wrapper {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #000000,
#000000, #0095f0 ,#0095f0, #0095F0, #ff0000,
#ff0000, #0095f0);
background-size: 1800% 1800%;
animation-iteration-count: 0;
animation-fill-mode: forwards;
animation: rainbow 30s ease 1;
}
#keyframes rainbow {
0% {background-position: 0% 0%}
10%{background-position: 100%% 15%}
20%{background-position: 100% 30%}
30%{background-position: 100% 45%}
40%{background-position: 100% 60%}
50%{background-position: 100% 85%}
60%{background-position: 100% 90%}
70%{background-position: 100% 100%}
80%{background-position: 100% 90%}
90%{background-position: 100% 85%}
80%{background-position: 100% 45%}
100%{background-position:100% 15%}
}
span {
margin-top: 250px;
color: #fff;
font-size: 30px;
font-family: 'Raleway', sans-serif;
animation-name: flickerAnimation;
animation-duration: 5s;
animation-iteration-count: 1;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
#message{
font-size: 10px;
color: #fff;
animation-name: alertFade;
animation-duration: 4s;
opacity: 0;
animation-iteration-count: 1000;
margin-top: 620px;
}
span:nth-child(1) {
animation-delay: 1s;
animation-duration: 5s;
}
span:nth-child(2) {
animation-delay: 7s;
animation-duration: 7s;
}
span:nth-child(3) {
animation-delay: 15s;
}
span:nth-child(4) {
animation-delay: 22s;
}
#keyframes flickerAnimation{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: .0;}
}
#keyframes alertFade{
0% {opacity: .25}
50% {opacity: .75}
100% {opacity: .25}
}
</style>
<div class="wrapper">
<span>Hello! </span>
<span>Please Wait While We Setup</span>
<span>This Will Only Take a Few Seconds</span>
<span>Just a second...</span>
<div style="text-align: center;">
<p id="message" align="center">Please Do Not Turn
Off Your Device.</p>
</div>
</div>
</body>
</html>
I am trying to get the following block of code to appear once the previous CSS Animation has finished :
#login{
margin-left: 25px;
margin-top: 80px;
text-align: center;
background-color: #000;
width: 350px;
height: 425px;
}
#icon{
margin-top: 50px;
width: 150px;
border-radius: 100px;
}
#other{
color: #fff;
font-size: 25px;
}
input[type=password] {
width: 70%;
height: 40px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
position: static;
}
input[type="submit"]
/*button*/{
margin-left: -41px;
height: 35.5px;
width: 32.5px;
}
#go{
background-color: gray;
color: gray;
border: none;
}
#hint{
color: #fff;
font-size: 8px;
}
</style>
<div style="text-align: center;">
<form action="tbd.htm" id="login">
<img src="http://chittagongit.com/
/images/windows-user-icon/windows-user-icon-14.jpg"
id="icon">
<p id="other" style="text-align: center;">Other User</p>
<p id="hint">Hint: Type Anything.</p>
<input type="password" name="password"
placeholder="Password"/>
<input type="submit" id="go">
</form>
</div>
How exactly can I execute this plan?
I'd just chain it to the sequence time of the actual animation since it's a fixed value anyway like so (you'll need to click the full-screen option to see example);
Oh, and PS -- I would highly recommend working to improve your code formatting habits and adhering to a cleaner DOM structure, but either way hope this helps. Cheers!
html, body{
margin: 0;
padding: 0;
background-color: #000;
}
.wrapper {
position: fixed;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(124deg, #000000,
#000000, #0095f0 ,#0095f0, #0095F0, #ff0000,
#ff0000, #0095f0);
background-size: 1800% 1800%;
animation-iteration-count: 0;
animation-fill-mode: forwards;
animation: rainbow 30s ease 1;
}
#keyframes rainbow {
0% {background-position: 0% 0%}
10%{background-position: 100%% 15%}
20%{background-position: 100% 30%}
30%{background-position: 100% 45%}
40%{background-position: 100% 60%}
50%{background-position: 100% 85%}
60%{background-position: 100% 90%}
70%{background-position: 100% 100%}
80%{background-position: 100% 90%}
90%{background-position: 100% 85%}
80%{background-position: 100% 45%}
100%{background-position:100% 15%}
}
#message{
font-size: 10px;
color: #fff;
animation-name: alertFade;
animation-duration: 4s;
text-align: center;
opacity: 0;
animation-iteration-count: 1000;
margin-top: 620px;
}
span {
margin-top: 250px;
color: #fff;
font-size: 30px;
font-family: 'Raleway', sans-serif;
animation-name: flickerAnimation;
animation-duration: 5s;
animation-iteration-count: 1;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(1) {
animation-delay: 1s;
animation-duration: 5s;
}
span:nth-child(2) {
animation-delay: 7s;
animation-duration: 7s;
}
span:nth-child(3) {
animation-delay: 15s;
}
span:nth-child(4) {
animation-delay: 22s;
}
#keyframes flickerAnimation{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: .0;}
}
#keyframes alertFade{
0% {opacity: .25}
50% {opacity: .75}
100% {opacity: .25}
}
#keyframes finale {
from {opacity: 0}
to {opacity: 1}
}
#login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: red 1px dashed;
opacity: 0;
animation: finale 1s ease forwards;
animation-delay: 30s;
}
<div class="wrapper">
<span>Hello! </span>
<span>Please Wait While We Setup</span>
<span>This Will Only Take a Few Seconds</span>
<span>Just a second...</span>
<p id="message">
Please Do Not Turn Off Your Device.
</p>
<form action="tbd.htm" id="login">
<img src="http://chittagongit.com/
/images/windows-user-icon/windows-user-icon-14.jpg"
id="icon">
<p id="other" style="text-align: center;">Other User</p>
<p id="hint">Hint: Type Anything.</p>
<input type="password"
name="password"
placeholder="Password"/>
<input type="submit"
id="go">
</form>
</div>
I want to resolve the question img:
How to resolve the blank space when fold between the red and purple div !
is whether because of the perspective property ?
Thanks a lot!!!
div {
width: 200px;
height: 100px;
background: #333;
}
.fold-div {
position: relative;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#div1 {
background: #d94f5c;
animation-name: fold-top;
transform-origin: top;
}
#div2 {
background: #742fad;
animation-name: fold-bottom;
transform-origin: bottom;
}
#keyframes fold-top {
100% {
transform: perspective(50px) rotateX(-8deg);
height: 0;
}
}
#keyframes fold-bottom {
100% {
transform: perspective(50px) rotateX(8deg);
height: 0;
}
}
<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>
I just added a negative margin to fix this issue. see the snippet.
div {
width: 200px;
height: 100px;
background: #333;
}
.fold-div {
position: relative;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#div1 {
background: #d94f5c;
animation-name: fold-top;
transform-origin: top;
margin-bottom: -10px; // negative margin
}
#div2 {
background: #742fad;
animation-name: fold-bottom;
transform-origin: bottom;
}
#keyframes fold-top {
100% {
transform: perspective(50px) rotateX(-8deg);
height: 0;
margin-bottom: 0; // reset margin to 0 to avoid a glitch bug
}
}
#keyframes fold-bottom {
100% {
transform: perspective(50px) rotateX(8deg);
height: 0;
}
}
<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>
inspire Jinu Kurian idea, i resolve the question by margin-bottom -10px when animation start!!! thanks Jinu Kurian a lot!!!
div {
width: 200px;
height: 100px;
background: #333;
}
.fold-div {
position: relative;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#div1 {
background: #d94f5c;
animation-name: fold-top;
transform-origin: top;
}
#div2 {
background: #742fad;
animation-name: fold-bottom;
transform-origin: bottom;
}
#keyframes fold-top {
0% {
margin-bottom: -10px; // when animate, margin-bottom -10px
}
100% {
transform: perspective(50px) rotateX(-8deg);
height: 0;
}
}
#keyframes fold-bottom {
100% {
transform: perspective(50px) rotateX(8deg);
height: 0;
}
}
thanks's Jinu Kurian, inspire by the idea, i resolve it when start animation 0% {
margin-bottom: -10px
}
<div>
</div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>
I'm very humbled by this right now. I'm trying to add this Skype styled preloader into this theme I'm making, but I have no idea how to call the function. I feel as if it needs Javascript, but it's not on the site. Please & Thank you for future reference
<!-- HTML FILES -->
<div class="table">
<div class="table--cell">
<div class="loader">
<span class="loader--ball loader--ball__first"></span>
<span class="loader--ball"></span>
<span class="loader--ball"></span>
<span class="loader--ball"></span>
</div>
</div>
</div>
<!-- CSS FILE -->
html body{
background-color:#2980b9;
width:100%;
height:100vh;
}
.table{
width:100%;
height:100%;
display:table;
.table--cell{
display:table-cell;
vertical-align:middle;
text-align:center;
}
}
.loader{
display:inline-block;
width:120px;
height:120px;
.loader--ball{
position:absolute;
left:0;
right:0;
margin:0 auto;
width:10px;
height:10px;
border-radius:50%;
background:#ecf0f1;
transform-origin:0 60px;
display:block;
animation: 2s rotate cubic-bezier(0.775, 0.030, 0.350, 1.000) infinite;
#for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation-delay:(0.1s * $i);
}
}
}
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader--ball:first-child{
background:none;
}
.loader--ball__first:before{
content:'';
width:10px;
height:10px;
position:absolute;
z-index:10;
top:0;
bottom:0;
background:#ecf0f1;
display:block;
border-radius:50%;
animation:2s grow cubic-bezier(0.775, 0.035, 0.310, 1.000) infinite;
}
#keyframes grow {
0%,
10% {
width:20px;
height:20px;
top:-2px;
left:-5px;
}
50% {
width:10px;
height:10px;
left:-5px;
}
85%, 100% {
width:20px;
height:20px;
top:-2px;
left:-5px;
}
}
The example is using SASS (scss). You need the compiled css if you are not using Sass. Example with compiled CSS
Compiled CSS:
html body {
background-color: #2980b9;
width: 100%;
height: 100vh;
}
.table {
width: 100%;
height: 100%;
display: table;
}
.table .table--cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.loader {
display: inline-block;
width: 120px;
height: 120px;
}
.loader .loader--ball {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ecf0f1;
-webkit-transform-origin: 0 60px;
-ms-transform-origin: 0 60px;
transform-origin: 0 60px;
display: block;
-webkit-animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
}
.loader .loader--ball:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader .loader--ball:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader--ball:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader .loader--ball:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader--ball:first-child {
background: none;
}
.loader--ball__first:before {
content: '';
width: 10px;
height: 10px;
position: absolute;
z-index: 10;
top: 0;
bottom: 0;
background: #ecf0f1;
display: block;
border-radius: 50%;
-webkit-animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
}
#-webkit-keyframes grow {
0%,
10% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
50% {
width: 10px;
height: 10px;
left: -5px;
}
85%, 100% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
}
#keyframes grow {
0%,
10% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
50% {
width: 10px;
height: 10px;
left: -5px;
}
85%, 100% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
}