i am trying to animate 2 images:
1.from bottom left to top right.
other from bottom right to top left.
image 1 is moving while the other is not...
1 image is moving (the image from bottom left to top right), the other is still not moving
when i run the code of still image in saprate html filr it runs fine...
<style>
html
{
height:100%
}
body
{
height: 100%;
width:100%;
margin: 0;
background-repeat: no-repeat;
/* background-attachment: fixed;*/
background-image: radial-gradient(black,white);
}
div.move_to_right
{
width: auto;
height: auto;
position: absolute;
left:200px;
/*background-color: black;*/
/* background-image: url('/f16.png');*/
}
.move_to_right{
position: absolute;
left:200px;
}
#move_to_right
{
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}
.ptag
{
color:white;
}
/* Safari 4.0 - 8.0 */
/* Standard syntax */
#keyframes example {
0%{
opacity: 0.5;
transform: translate(-200px,150px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
div.move_to_left
{
width: auto;
height: auto;
position: absolute;
left:200px;
/*background-color: black;*/
/* background-image: url('/f16.png');*/
}
.move_to_left{
position: absolute;
right:200px;
}
#move_to_left
{
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}
.ptag
{
color:white;
}
/* Safari 4.0 - 8.0 */
/* Standard syntax */
#keyframes example {
0%{
opacity: 0.5;
transform: translate(200px,150px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
</style>
<html><body>
<div class="move_to_right">
<!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
<img id="move_to_right" src="f16.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
<!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
<img id="move_to_left" src="f162.png" style="width:150px; height:150px;">
</div>
</body></html>
Some issues:
you didn't close the #keyframes opening curly brace
both your keyframes had the same name examples
html {
height: 100%
}
body {
height: 100%;
width: 100%;
margin: 0;
background-repeat: no-repeat;
background-image: radial-gradient(black, white);
}
div.move_to_right {
width: auto;
height: auto;
position: absolute;
left: 200px;
}
.move_to_right {
position: absolute;
left: 200px;
}
#move_to_right {
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: move_to_right;
-webkit-animation-duration: 10s;
animation-name: move_to_right;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes move_to_right {
0% {
opacity: 0.5;
transform: translate(-200px, 150px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
div.move_to_left {
width: auto;
height: auto;
position: absolute;
left: 200px;
}
.move_to_left {
position: absolute;
right: 200px;
}
#move_to_left {
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: move_to_left;
-webkit-animation-duration: 10s;
animation-name: move_to_left;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes move_to_left {
0% {
opacity: 0.5;
transform: translate(200px, 150px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
<div class="move_to_right">
<img id="move_to_right" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
<img id="move_to_left" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>
Related
I am using animations in CSS but it is not working. If I check in the inspect menu it is showing invalid syntax even though the syntax is normal. I have other two animations but they are working fine.
Only a particular animation in which I am trying to adjust the width isn't working.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.bg-div {
background: url(imgs/sky.png);
height: 100vh;
background-size: 79% 792px;
background-position-y: -332px;
width: 900vw;
}
.sea-div {
background: url(imgs/sea.jpg);
height: 37vh;
position: absolute;
bottom: 0;
width: 900vw;
background-size: 10% 403px;
}
.bg-ani-class {
animation: seaMove linear infinite 3s;
background-repeat: repeat-x;
}
.sea-ani-class {
animation: seaMove linear infinite 6s;
background-repeat: repeat-x;
}
.obst-ani-class {
animation: obstMove linear 5s;
}
.mountain-div {
position: absolute;
top: 10vh;
/* width: 18vh; */
/* height: 20vh; */
left: 108vw;
}
.mountain-div img {
width: 148vh;
}
.hanuman-div {
position: absolute;
top: 28vh;
left: 3vw;
}
.hanuman-div img {
width: 20vw;
}
#gada {
position: absolute;
left: 0;
/* top: 56px; */
transition: 0.1s ease all;
}
.gada-rot {
left: 8vw !important;
transform: rotate(180deg);
top: -22px !important;
}
.laser {
position: absolute;
transform: rotateZ(189deg);
/* top: -14vh; */
left: 282px;
/* width: 45vw !important; */
width: 0% !important;
/* transition: 0.4s ease-out; */
animation: laserAnimation infinite 3s;
}
.dragon-1-div {}
.dragon-2-div {}
/* Animations */
/* These 2 Animations are working */
#keyframes seaMove {
100% {
transform: translateX(-500vw);
}
}
#keyframes obstMove {
0% {
left: 108vw;
}
100% {
left: -100vw;
}
}
/* This animation isn't working */
#keyframes laserAnimation {
from {
width: 0 !important;
}
to {
width: 45vw !important;
}
}
<div class="bg-div bg-ani-class"></div>
<div class="sea-div sea-ani-class"></div>
<div class="hanuman-div">
<img src="imgs/hanuman.png" alt="">
<img src="imgs/gada.png" alt="" id="gada">
<img src="imgs/laserbeam.png" alt="" class="laser">
</div>
<div class="mountain-div">
<img src="imgs/mountain.png" alt="">
</div>
<div class="dragon-1-div"></div>
<div class="dragon-2-div"></div>
It's generally not a good idea to animate width and height. Always try to use composite animations e.g. opacity, transforms. To achieve width animation use scale transform.
Here is a laser show for you:
body {
overflow: hidden;
}
.laser {
position: absolute;
left: 0;
top: 50%;
height: 10px;
width: 100%;
background: #d7272b;
animation: laserAnimation 2s ease-out infinite;
}
.greenLaser {
position: absolute;
left: 0;
top: 0;
height: 10px;
width: 100%;
background: #0063d5;
animation: laserAnimation 2s ease-out infinite;
}
.blueLaser {
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width: 100%;
background: #00d53b;
animation: laserAnimation 2s ease-out infinite;
}
#keyframes laserAnimation {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
<div class="laser">
</div>
<div class="greenLaser">
</div>
<div class="blueLaser">
</div>
I am trying to make something like this:
but the ball doesn't seem to pass through the ring, but rather passes across the ring. How can I fix this issue?
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
z-index:1;
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-300px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
Another idea in case you need better support than clip-path. The trick is to play with transparent color:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
}
.ring:after {
z-index:1;
border-bottom-color:transparent;
border-right-color:transparent;
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-310px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
You can try to change z-index of ball inside of animation
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
z-index: 10;
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
position: relative;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
You can use a 3d transform to get automatically this effect.
Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:
body {
height: 50em;
transform-style: preserve-3d;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9;
margin-top: 100px;
transform: rotateX(50deg) rotateY(0deg) ;
transform-style: preserve-3d;
}
#keyframes spinner {
0%, 30% {
transform: rotateX(50deg) rotateY(0deg);
}
60%, 100% {
transform: rotateX(50deg) rotateY(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
I have a down arrow with rings in a ripple effect around it. The down arrow click doesn't work with the rings around it, but if I remove the rings, the click function works normally.
This is the webpage: https://rimildeyjsr.github.io/St.Anthony-Website/
Any ideas how to fix it?
CSS:
body{
background: red;
}
.down-arrow {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 5;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
HTML:
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
add z-index some higher value will solve the problem
body{
background: red;
}
.down-arrow {/*
display: none;*/
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 15;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
Credit to #nevermind
I have following code.
#mf-loader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 30px;
}
.mf-loader-circle {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
border: 2px solid #03C9A9;
top: -15px;
background: white;
text-align: center;
line-height: 30px;
color: #03C9A9;
}
.mf-loader-text {
position: absolute;
width: 150px;
top: 20px;
}
#one-text {
left: -10px;
-webkit-animation: cl 3s;
}
#two-text {
left: 200px;
-webkit-animation: cl 3s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
color: rgba(1, 1, 1, 0);
}
#three-text {
left: 480px;
-webkit-animation: cl 3s;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
color: rgba(1, 1, 1, 0);
}
#-webkit-keyframes cl {
from {
color: rgba(1, 1, 1, 0);
}
to {
color: rgba(1, 1, 1, 1);
}
}
#two {
left: 240px;
}
#three {
left: 490px;
}
#mf-loader {
width: 100%;
height: 3px;
background: #03C9A9;
position: absolute;
-webkit-animation: mymove 5s;
/* Chrome, Safari, Opera */
animation: mymove 5s;
border-radius: 3px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
<div id="mf-loader-container">
<div id="mf-loader">
<div class="mf-loader-circle" id="one">
1
</div>
<div class="mf-loader-circle" id="two">
2
</div>
<div class="mf-loader-circle" id="three">
3
</div>
<div class="mf-loader-text" id="one-text">
Each day will be better than last.
<br>This one especially
</div>
<div class="mf-loader-text" id="two-text">
Subscribing .. Thank you for subscribing. We appreciate it!
</div>
<div class="mf-loader-text" id="three-text">
DONE
</div>
</div>
</div>
It is an animated checkout-like action which is done with CSS alone. I'm trying to change the content of the circle once the text appears to check mark ✓ - is there any way to change the content using content tag in css.
Change the content (the 1, 2, 3 numbers) to :after pseudo-elements and set the content there. Then, apply that to each of the circles. With this, you can include them into your animation by changing content:"";
Change "check" to whatever you need.
.mf-loader-circle:after {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#one:after {
content: "1";
-webkit-animation: check1 3s;
-webkit-animation-fill-mode: forwards;
}
#two:after {
content: "2";
-webkit-animation: check2 3s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
}
#three:after {
content: "3";
-webkit-animation: check3 3s;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes check1 {
from {
content: "1";
}
to {
content: "check";
}
}
#-webkit-keyframes check2 {
from {
content: "2";
}
to {
content: "check";
}
}
#-webkit-keyframes check3 {
from {
content: "3";
}
to {
content: "check";
}
}
#mf-loader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 30px;
}
.mf-loader-circle {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
border: 2px solid #03C9A9;
top: -15px;
background: white;
text-align: center;
line-height: 30px;
color: #03C9A9;
}
.mf-loader-text {
position: absolute;
width: 150px;
top: 20px;
}
#one-text {
left: -10px;
-webkit-animation: cl 3s;
}
#two-text {
left: 200px;
-webkit-animation: cl 3s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
color: rgba(1, 1, 1, 0);
}
#three-text {
left: 480px;
-webkit-animation: cl 3s;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
color: rgba(1, 1, 1, 0);
}
#-webkit-keyframes cl {
from {
color: rgba(1, 1, 1, 0);
}
to {
color: rgba(1, 1, 1, 1);
}
}
#two {
left: 240px;
}
#three {
left: 490px;
}
#mf-loader {
width: 100%;
height: 3px;
background: #03C9A9;
position: absolute;
-webkit-animation: mymove 5s;
/* Chrome, Safari, Opera */
animation: mymove 5s;
border-radius: 3px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
<div id="mf-loader-container">
<div id="mf-loader">
<div class="mf-loader-circle" id="one">
</div>
<div class="mf-loader-circle" id="two">
</div>
<div class="mf-loader-circle" id="three">
</div>
<div class="mf-loader-text" id="one-text">
Each day will be better than last.
<br>This one especially
</div>
<div class="mf-loader-text" id="two-text">
Subscribing .. Thank you for subscribing. We appreciate it!
</div>
<div class="mf-loader-text" id="three-text">
DONE
</div>
</div>
</div>
Here's a summary of the changes:
Removed the content from your circles in the HTML.
Created an :after pseudo-element, common to all your circles.
.mf-loader-circle:after {
position:absolute;
width:100%;
height:100%;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
Here, I used 2D transforms to position the number in the center with position:absolute;
Set each of the content:""; attributes to the necessary numbers using the elements' IDs.
Created an animation for the different numbers, for example:
#one:after {
content:"1";
-webkit-animation: check1 3s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes check1{
from {
content:"1";
}
to {
content:"check";
}
}
NOTE: add the corresponding vendor prefixes.
You can use the :before to assign each number using content: 'number';. Then, you can animate the check transition smoothly in a keyframe by changing the color to white at 50%, then assigning it the checkmark value.
For this solution you only need to define 1 keyframe animation.
CSS Changes
Using content to display your numbers instead of inside of the html.
Setting up the keyframe animation, delay (except for the first one), and fill-mode.
.mf-loader-circle#two:before {
content: '2';
animation: changeLetter 2s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
Changing the color to white, then assigning it the checkmark.
#keyframes changeLetter {
50% {
color: white;
}
100% {
content: "\2713";
}
}
#mf-loader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 30px;
}
.mf-loader-circle {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
border: 2px solid #03C9A9;
top: -15px;
background: white;
text-align: center;
line-height: 30px;
color: #03C9A9;
}
.mf-loader-circle#one:before {
content: '1';
-webkit-animation: changeLetter 2s;
/* Chrome, Safari, Opera */
animation: changeLetter 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mf-loader-circle#two:before {
content: '2';
-webkit-animation: changeLetter 2s;
/* Chrome, Safari, Opera */
animation: changeLetter 2s;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mf-loader-circle#three:before {
content: '3';
-webkit-animation: changeLetter 2s;
/* Chrome, Safari, Opera */
animation: changeLetter 2s;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mf-loader-text {
position: absolute;
width: 150px;
top: 20px;
}
#one-text {
left: -10px;
-webkit-animation: cl 3s;
}
#two-text {
left: 200px;
-webkit-animation: cl 3s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
color: rgba(1, 1, 1, 0);
}
#three-text {
left: 480px;
-webkit-animation: cl 3s;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
color: rgba(1, 1, 1, 0);
}
#-webkit-keyframes cl {
from {
color: rgba(1, 1, 1, 0);
}
to {
color: rgba(1, 1, 1, 1);
}
}
#two {
left: 240px;
}
#three {
left: 490px;
}
#mf-loader {
width: 100%;
height: 3px;
background: #03C9A9;
position: absolute;
-webkit-animation: mymove 5s;
/* Chrome, Safari, Opera */
animation: mymove 5s;
border-radius: 3px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
#-webkit-#keyframes changeLetter {
50% {
color: white;
}
100% {
content: "\2713";
}
}
#keyframes changeLetter {
50% {
color: white;
}
100% {
content: "\2713";
}
}
<div id="mf-loader-container">
<div id="mf-loader">
<div class="mf-loader-circle" id="one">
</div>
<div class="mf-loader-circle" id="two">
</div>
<div class="mf-loader-circle" id="three">
</div>
<div class="mf-loader-text" id="one-text">
Each day will be better than last.
<br>This one especially
</div>
<div class="mf-loader-text" id="two-text">
Subscribing .. Thank you for subscribing. We appreciate it!
</div>
<div class="mf-loader-text" id="three-text">
DONE
</div>
</div>
</div>
JSFiddle
I am trying to make this button bounce with CSS3
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
}
<div class="order">Order</div>
I would like it to bounce towards the screen (on the Z axis) up and down.
You can use a keyframe animation to animate the scale ratio and make your button bounce:
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
Iteration count:
If you want to stop the animation after a number of "bounces", you can use animation-iteration-count (use an even number of iterations otherwise the animation will snap on the last iteration) :
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
animation-iteration-count: 8;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
try this css
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
background-size: cover;
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
}
#keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
#-webkit-keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
.blink {
animation:fade 1000ms infinite;
-webkit-animation:fade 1000ms infinite;
}
try this html
<div class="order blink"></div>
The answer posted by web-tiki, would be the best one to use, still I have a different approach becoz you have already used position:absolute.
See this FIDDLE
you need to animate height and width for button using keyframe.
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
<div class="order"></div>
Edit:
To add further, you can also animate left and top to 38px both so the
button doesn't look like deviating from original position see this
Fiddle
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 0.5s 2;
}
/* Standard syntax */
#keyframes mymove {
0% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
50% {
height: 100px;
width: 100px;
left: 38px;
top: 38px;
}
100% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
}
<div class="order"></div>
You can animate(bounce) like following:
CSS:
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
animation: myfirst 2s infinite;
-webkit-animation: myfirst 2s infinite;
}
#-webkit-#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Check Fiddle