I have a problem regarding the positioning of my container.
Keeping the styles whilst removing the position: absolute; on the .dot seems to be proving rather tricky and with each attempt the dots are going all over the place!
To clarify, I'm looking at being able to move the entire loader
.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
}
.loader {
display: inline-block;
float: left;
margin-left:100px;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
#keyframes animateDot1 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(180deg) translateX(-12px); }
75% { transform: rotate(180deg) translateX(-12px); }
100% { transform: rotate(360deg) translateX(-12px); }
}
#keyframes animateDot2 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(-180deg) translateX(-12px); }
75% { transform: rotate(-180deg) translateX(-12px); }
100% { transform: rotate(-360deg) translateX(-12px); }
}
#keyframes animateDot3 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(180deg) translateX(12px); }
75% { transform: rotate(180deg) translateX(12px); }
100% { transform: rotate(360deg) translateX(12px); }
}
#keyframes animateDot4 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(-180deg) translateX(12px); }
75% { transform: rotate(-180deg) translateX(12px); }
100% { transform: rotate(-360deg) translateX(12px); }
}
<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
you need to set position:relative to parent, otherwise it will be out of the DOM flow.
As for my tests you don't need the .loader CSS
.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
position: relative;
background: lightblue;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 15px 8px
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
#keyframes animateDot1 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(180deg) translateX(-12px);
}
75% {
transform: rotate(180deg) translateX(-12px);
}
100% {
transform: rotate(360deg) translateX(-12px);
}
}
#keyframes animateDot2 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(-180deg) translateX(-12px);
}
75% {
transform: rotate(-180deg) translateX(-12px);
}
100% {
transform: rotate(-360deg) translateX(-12px);
}
}
#keyframes animateDot3 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(180deg) translateX(12px);
}
75% {
transform: rotate(180deg) translateX(12px);
}
100% {
transform: rotate(360deg) translateX(12px);
}
}
#keyframes animateDot4 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(-180deg) translateX(12px);
}
75% {
transform: rotate(-180deg) translateX(12px);
}
100% {
transform: rotate(-360deg) translateX(12px);
}
}
<div style="float:left">Deleting 'Folder Name' folder</div>
<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
Related
I have two circles with pulse animation infinite times. Now I need animating the circle one after another continuously with infinite times. I tried pulsation the circle infinite times. I have added delay animation but it is not working I don't why. Please kindly refer the code and help to achieve that functionality:
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
Css:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
thanks in advance
You can add the same class to all circles for common properties. The only properties you need different for each is animation-delay.
You can use a small jQuery code to set that for any number of divs. I have created an example for 3 divs, but feel free to extend it.
let els = $(".inner"),
length = $(".inner").length
els.each(function(index) {
$(this).css('animation-delay', (index / length) + 's')
})
.inner {
display: inline-block;
vertical-align: top;
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
margin: 10px;
animation: pulse 1s infinite linear;
}
#keyframes pulse {
0% {
transform: scaleX(1)
}
50% {
transform: scale3d(1.05, 1.05, 1.05)
}
to {
transform: scaleX(1)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
animation-delay is working:
.inner {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
animation-delay: 5s
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
<div class="inner">one
</div>
<div class="inner1">two
</div>
Only Add animation Delay= .5s; and reduce second animation time with 1s
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
CSS:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 1s infinite;
animation-delay: .5s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
I am trying to animate a frame where the 'heart-flap' opens to the left. But can't seem to do it -- the axis of the box and the heart is not the same while opening.
My jsFiddle https://jsfiddle.net/dk1446/unjqx08d/2/
#import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
background-color: white;
font-family: 'Poiret One', Segoe UI Light, cursive;
}
.heart {
background-color: #d32f2f;
display: inline-block;
height: 200px;
margin: 0 10px;
position: relative;
top: 0;
/* transform: rotate(-45deg); */
width: 200px;
margin-top: 200px;
margin-left: 500px;
/* transform: rotate(0deg); */
}
.heart:before,
.heart:after {
content: "";
background-color: #d32f2f;
border-radius: 50%;
height: 200px;
position: absolute;
width: 200px;
}
.heart:before {
top: -110px;
left: 0;
}
.heart:after {
left: 110px;
top: 0;
}
#card {
margin-top: 200px;
}
#message {
height: 400px;
width: 400px;
margin-top: -410px;
margin-left: 500px;
background-color: #333;
color: white;
border: 3px dashed violet;
border-radius: 35% 0 35% 0;
}
#card #heart1 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: closeLeft 2s ease-in-out forwards;
-moz-animation: closeLeft 2s ease-in-out forwards;
-ms-animation: closeLeft 2s ease-in-out forwards;
animation: closeLeft 2s ease-in-out forwards;
}
#card:hover #heart1 {
-webkit-animation: openLeft 2s ease-in-out forwards;
-moz-animation: openLeft 2s ease-in-out forwards;
-ms-animation: openLeft 2 ease-in-out forwards;
animation: openLeft 2s ease-in-out forwards;
}
#-webkit-keyframes closeLeft {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes closeLeft {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(180deg);
}
}
#-ms-keyframes closeLeft {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(180deg);
}
}
#keyframes closeLeft {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
#-moz-keyframes openLeft {
from {
-moz-transform: rotateY(180deg);
}
to {
-moz-transform: rotateY(0deg);
}
}
#-webkit-keyframes openLeft {
from {
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-ms-keyframes openLeft {
from {
-ms-transform: rotateY(180deg);
}
to {
-ms-transform: rotateY(0deg);
}
}
#keyframes openLeft {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
<div id="card">
<div class="heart" id="heart1"></div>
<div id="message">
<h2>Happy Valentines Day</h2>
</div>
<!-- <div class="heart" id="heart2"></div> -->
</div>
I would like the 'heart' to open to the left and close right. It should be in line with the box underneath. I can't seem to figure out a way.
You almost had it! You need to add transform-origin: 0 0 to the #heart1
#import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
background-color: white;
font-family: 'Poiret One', Segoe UI Light, cursive;
}
.heart {
background-color: #d32f2f;
display: inline-block;
height: 200px;
margin: 0 10px;
position: relative;
top: 0;
/* transform: rotate(-45deg); */
width: 200px;
margin-top: 200px;
margin-left: 500px;
/* transform: rotate(0deg); */
}
.heart:before,
.heart:after {
content: "";
background-color: #d32f2f;
border-radius: 50%;
height: 200px;
position: absolute;
width: 200px;
}
.heart:before {
top: -110px;
left: 0;
}
.heart:after {
left: 110px;
top: 0;
}
#card {
margin-top: 200px;
}
#message {
height: 400px;
width: 400px;
margin-top: -410px;
margin-left: 500px;
background-color: #333;
color: white;
border: 3px dashed violet;
border-radius: 35% 0 35% 0;
}
#card #heart1 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: closeLeft 2s ease-in-out forwards;
-moz-animation: closeLeft 2s ease-in-out forwards;
-ms-animation: closeLeft 2s ease-in-out forwards;
animation: closeLeft 2s ease-in-out forwards;
transform-origin: 0 0;
}
#card:hover #heart1 {
-webkit-animation: openLeft 2s ease-in-out forwards;
-moz-animation: openLeft 2s ease-in-out forwards;
-ms-animation: openLeft 2 ease-in-out forwards;
animation: openLeft 2s ease-in-out forwards;
}
#-webkit-keyframes closeLeft {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes closeLeft {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(180deg);
}
}
#-ms-keyframes closeLeft {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(180deg);
}
}
#keyframes closeLeft {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
#-moz-keyframes openLeft {
from {
-moz-transform: rotateY(180deg);
}
to {
-moz-transform: rotateY(0deg);
}
}
#-webkit-keyframes openLeft {
from {
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-ms-keyframes openLeft {
from {
-ms-transform: rotateY(180deg);
}
to {
-ms-transform: rotateY(0deg);
}
}
#keyframes openLeft {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
<div id="card">
<div class="heart" id="heart1"></div>
<div id="message">
<h2>Happy Valentines Day</h2>
</div>
<!-- <div class="heart" id="heart2"></div> -->
</div>
Here's the fiddle: https://jsfiddle.net/disinfor/y0p2t94q/1/
Edit for more info: the default origin for an element is 50% 50% 0 - which translates to the middle of the element. 0 0 moves the point of origin to the top left corner.
More reading: https://www.w3schools.com/cssref/css3_pr_transform-origin.asp
#rorschach: finally you got the animation, but did you notice your card area yet it's not sorted out!! when you hover on the card the animation should start I guess, so I think either you set max-width to the card.
I`m working on an animated heart only with CSS.
I want it to pulse 2 times, take a small break, and then repeat it again.
What I have now:
small ==> big ==> small ==> repeat animation
What I'm going for:
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
How can I do it?
My code :
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
-webkit-transition: opacity 7s ease-in-out;
-moz-transition: opacity 7s ease-in-out;
-o-transition: opacity 7s ease-in-out;
transition: opacity 7s ease-in-out;}
#keyframes heartFadeInOut {
0% {
opacity:1;
}
14% {
opacity:1;
}
28% {
opacity:0;
}
42% {
opacity:0;
}
70% {
opacity:0;
}
}
#heart img.top {
animation-name: heartFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
<img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>
See also this Fiddle.
You can incorporate the pause into the animation. Like so:
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
Working example:
https://jsfiddle.net/t7f97kf4/
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
div
{
background-color: red;
width: 50px;
height: 50px;
animation: heartbeat 1s infinite;
}
<div>
Heart
</div>
Edit:
Working example with pure CSS heart shape:
https://jsfiddle.net/qLfg2mrd/
#keyframes heartbeat
{
0%
{
transform: scale( .75);
}
20%
{
transform: scale( 1);
}
40%
{
transform: scale( .75);
}
60%
{
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100%
{
transform: scale( .75);
}
}
#heart
{
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
}
#heart:before,
#heart:after
{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after
{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart"></div>
Pulse 2 times, take a small break, and then repeat it again
Try this. Going with animation opacity is a bad choice. transform: scale() will do the job.
.heart:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'icons';
font-size: 21px;
text-indent: 0;
font-variant: normal;
line-height: 21px;
}
.heart {
position: relative;
width: 500px;
overflow: inherit;
margin: 50px auto;
list-style: none;
-webkit-animation: animateHeart 2.5s infinite;
animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
top: 0;
left: 50%;
width: 120px;
height: 200px;
background: red;
border-radius: 100px 100px 0 0;
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 26%;
-webkit-transform: rotate(45deg) translateZ(0);
transform: rotate(45deg) translateZ(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
#-webkit-keyframes animateHeart {
0% {
-webkit-transform: scale(0.8);
}
5% {
-webkit-transform: scale(0.9);
}
10% {
-webkit-transform: scale(0.8);
}
15% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(0.8);
}
}
#keyframes animateHeart {
0% {
transform: scale(0.8);
}
5% {
transform: scale(0.9);
}
10% {
transform: scale(0.8);
}
15% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
span {
font-family: 'Cantora One', sans-serif;
font-size: 64px;
position: absolute;
top: 165px;
}
<div class="heart">
</div>
I like ketan's answer, but I wanted to improve the heart animation to make it more realistic.
A heart does not double in size when it beats. 10% change in size looks better to me.
I like it getting both larger and smaller
When it stops moving altogether it looks dead to me. Even when it isn't beating, it needs to expand or contract a little
I removed the "alternate directions" code so that it runs the same way through every time
I explicitly have the heart start end and at normal scale (1) and have the animation in the middle of the sequence. It seems clearer that way to me.
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#keyframes heartFadeInOut {
0% {transform: scale(1);}
25% {transform: scale(.97);}
35% {transform: scale(.9);}
45% {transform: scale(1.1);}
55% {transform: scale(.9);}
65% {transform: scale(1.1);}
75% {transform: scale(1.03);}
100% {transform: scale(1);}
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 2s;
}
<div id="heart" >
<img class="bottom" src="https://i.stack.imgur.com/iBCpb.png" width="100px">
</div>
Based on various comments and making use of the ♥ we'll get this:
body {
font-size: 40pt;
color: red;
}
#keyframes heartbeat {
0% {
font-size: .75em;
}
20% {
font-size: 1em;
}
40% {
font-size: .75em;
}
60% {
font-size: 1em;
}
80% {
font-size: .75em;
}
100% {
font-size: .75em;
}
}
div {
animation: heartbeat 1s infinite;
}
<div>
♥
</div>
body{
margin: 0;
padding: 0;
background: #1f1f1f;
}
body:before
{
position: absolute;
content: '';
left: 50%;
width: 50%;
height: 100%;
background: rgba(0,0,0,.2);
}
.center
{
position: absolute;
top:50%;
left: 50%;
background: #1f1f1f;
transform: translate(-50%,-50%);
padding: 100px;
border: 5px solid white;
border-radius: 100%;
box-shadow:20px 20px 45px rgba(0,0,0,.4);
z-index: 1;
overflow: hidden;
}
.heart
{
position: relative;
width: 100px;
height: 100px;
background:#ff0036;
transform: rotate(45deg) translate(10px,10px);
animation: ani 1s linear infinite;
}
.heart:before
{
content: '';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
top:-50%;
left:0;
border-radius: 50%;
}
.heart:after
{
content:'';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
bottom:0;
right:50%;
border-radius: 50%;
}
.center:before
{
content: '';
position: absolute;
top:0;
left:-50%;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#keyframes ani{
0%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
25%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
30%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
50%{
transform: rotate(45deg) translate(10px,10px) scale(1.2);
}
70%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
90%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
100%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HeartBeat Animation</title>
<link rel="stylesheet" href="Style.css" type="text/css">
</head>
<body>
<div class="center">
<div class="heart">
</div>
</div>
</body>
</html>
Output
for more: Heart Beating Animation
I think this is what you want for your image animation. There is no need of top image. Just use bottom.
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#keyframes heartFadeInOut {
0%
{ transform: scale( .5 ); }
20%
{ transform: scale( 1 ); }
40%
{ transform: scale( .5 ); }
60%
{ transform: scale( 1 ); }
80%
{ transform: scale( .5 ); }
100%
{ transform: scale( .5 ); }
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 1.5s;
animation-direction: alternate;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>
I needed this for a project I was working on. I was trying to make it look as realistic as possible, and this is what I came up with.
#keyframes heartbeat {
0% {
transform: scale( .95 );
}
20% {
transform: scale( .97 );
}
30% {
transform: scale( .95 );
}
40% {
transform: scale( 1 );
}
100% {
transform: scale( .95 );
}
}
animation: heartbeat 1s infinite;
I have struggling to understand why my circle animation for my website works perfectly for browsers such as Chrome, IE, Opera, and Firefox, but fails to work for Safari.
JSFiddle
Website
.circle {
width: 45%;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 40px;
margin-top: -20px;
text-align: center;
}
.circle div span {
font-size: 50px;
}
.circle .desc {
font-size: 20px;
line-height: 29px;
text-align: center;
}
#left:hover {
animation: sway 2s infinite ease-in-out;
-webkit-animation: sway 2s infinite ease-in-out;
-moz-animation: sway 2s infinite ease-in-out;
-o-animation: sway 2s infinite ease-in-out;
}
#right:hover {
animation: swayClock 2s infinite ease-in-out;
-webkit-animation: swayClock 2s infinite ease-in-out;
-moz-animation: swayClock 2s infinite ease-in-out;
-o-animation: swayClock 2s infinite ease-in-out;
}
#keyframes sway {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(-360deg);
-webkit-transform: -webkit-rotate(-360deg);
-ms-transform: -ms-rotate(-360deg);
-moz-transform: -moz-rotate(-360deg);
-o-transform: -o-rotate(-360deg);
}
}
#-webkit-keyframes sway {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(-360deg);
-webkit-transform: -webkit-rotate(-360deg);
-ms-transform: -ms-rotate(-360deg);
-moz-transform: -moz-rotate(-360deg);
-o-transform: -o-rotate(-360deg);
}
}
#keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(360deg);
-webkit-transform: -webkit-rotate(360deg);
-ms-transform: -ms-rotate(360deg);
-moz-transform: -moz-rotate(360deg);
-o-transform: -o-rotate(360deg);}
}
#-webkit-keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(360deg);
-webkit-transform: -webkit-rotate(360deg);
-ms-transform: -ms-rotate(360deg);
-moz-transform: -moz-rotate(360deg);
-o-transform: -o-rotate(360deg);}
}
#left {
float: left;
padding-right: 5%;
}
#left:after {
border: 1px solid #2E8AE6;
}
#right {
float: right;
padding-left: 5%;
}
#right:after {
border: 1px solid #FF9900;
}
<div class="circle" id="left"><div><span>Coding</span><br><p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web development</i>.</p></div></div>
<div class="circle" id="right"><div><span>Design</span><p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful functionality</i></p></div></div>
Fixed your code:
JSFiddle
.circle {
width: 45%;
}
.circle:after {
content: '';
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.circle div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 40px;
margin-top: -20px;
text-align: center;
}
.circle div span {
font-size: 50px;
}
.circle .desc {
font-size: 20px;
line-height: 29px;
text-align: center;
}
#left:hover {
-webkit-animation: sway 2s infinite ease-in-out;
-moz-animation: sway 2s infinite ease-in-out;
-o-animation: sway 2s infinite ease-in-out;
animation: sway 2s infinite ease-in-out;
}
#right:hover {
animation: swayClock 2s infinite ease-in-out;
-webkit-animation: swayClock 2s infinite ease-in-out;
-moz-animation: swayClock 2s infinite ease-in-out;
-o-animation: swayClock 2s infinite ease-in-out;
}
#keyframes sway {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#-webkit-keyframes sway {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#left {
float: left;
padding-right: 5%;
}
#left:after {
border: 1px solid #2E8AE6;
}
#right {
float: right;
padding-left: 5%;
}
#right:after {
border: 1px solid #FF9900;
}
<div class="circle" id="left">
<div>
<span>Coding</span>
<p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web
development</i>.
</p>
</div>
</div>
<div class="circle" id="right">
<div>
<span>Design</span>
<p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful
functionality</i>
</p>
</div>
</div>
Be attentive — there no values: -webkit-rotate, -ms-rotate, -moz-rotate, -o-rotate. The latest versions of other browsers support non-prefixed property transform: rotate() and ignore others, but -webkit-transform: rotate() is needed for Safari.
I'm trying to create a folding effect in a hexagon composed of triangles. So far I've only managed to make the triangles translate instead of folding over. I want to make
this http://jsfiddle.net/zn6jbhr6/
Relevant SCSS
#mixin hexTranslateKeyFrames($name, $degree) {
#keyframes #{$name} {
#content;
}
}
$hex-degree: 0deg;
#for $idx from 1 through 6 {
$hex-degree: $hex-degree + 60;
#include hexTranslateKeyFrames(hexTranslate#{$idx}, $hex-degree) {
0% { transform: rotateZ(0deg) rotate($hex-degree); }
54.55%, 100% { transform: rotateZ(360deg) rotate($hex-degree); }
}
}
$order2: (0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s);
.folding-hex {
#include hexagon();
#for $i from 1 through 6 {
.triangle:nth-child(#{$i}) {
animation: hexTranslate#{$i} 2.2s infinite #{nth($order2, $i)} linear;
}
}
}
more like this http://jsfiddle.net/wvm15yL4/
Relevant CSS
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
You need to create an animation that rotates in 3D.
Since it is a little hard, I have done it only once, and reused it for the other elements setting an intermediate element in the DOM that does the rotation in the plane
The first 2 parameters in the rotate3D are sin(60deg) and cos(60deg), to make the rotation axis be at 60 deg
#keyframes flip {
0% { transform: rotate3d( 0.5, 0.866, 0, 90deg);
opacity: 0;}
0.1% { transform: rotate3d( 0.5, 0.866, 0, 90deg);
opacity: 1;}
14% { transform: rotate3d( 0.5, 0.866, 0, 0deg); }
50% { transform: rotate3d(-0.5, 0.866, 0, 0deg); }
63.99% { transform: rotate3d(-0.5, 0.866, 0, -90deg);
opacity: 1;}
64%, 100% { transform: rotate3d(-0.5, 0.866, 0, -90deg);
opacity: 0}
}
.folding-hex {
height: 69.28px;
width: 80px;
position: relative;
margin: 0 auto;
transform-origin: 0 0;
transform: translateX(40px) rotate(30deg); }
.rotator {
transform-origin: 20px 37.64px;
}
.rotator:nth-child(1) {
transform: rotate(0deg);
}
.rotator:nth-child(2) {
transform: rotate(60deg);
}
.rotator:nth-child(3) {
transform: rotate(120deg);
}
.rotator:nth-child(4) {
transform: rotate(180deg);
}
.rotator:nth-child(5) {
transform: rotate(240deg);
}
.rotator:nth-child(6) {
transform: rotate(300deg);
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 34.64px 20px 0;
transform-origin: 20px 37.64px;
border-color: #E50C4E transparent;
animation: flip 3s linear infinite;
}
.rotator:nth-child(2) .triangle {
border-color: #b5093d transparent;
animation-delay: -2.5s;
}
.rotator:nth-child(3) .triangle {
border-color: #b5093d transparent;
animation-delay: -2.0s;
}
.rotator:nth-child(4) .triangle {
animation-delay: -1.5s;
}
.rotator:nth-child(5) .triangle {
border-color: #f8799f transparent;
animation-delay: -1.0s;
}
.rotator:nth-child(6) .triangle {
border-color: #f8799f transparent;
animation-delay: -0.5s;
}
<div class="folding-hex">
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
</div>