I've created an animation with CSS and an SVG, I'm having different parts of it animate in and out. I want to have it start from the top once it's done.
I have multiple keyframes, since i'm animating different parts of the SVG, and different styles of the animation.
-- I want to repeat the string of animations after they've all ran through.
This is what I have right now: https://codepen.io/megan24689/pen/NZyOdb?editors=1100 (pls check out the animation I have so far)
CSS
.swing-out-right-fwd-1 {
-webkit-animation: swing-out-right-fwd 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 2s both;
animation: swing-out-right-fwd 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 2s both;
}
.swing-in-right-fwd-2 {
-webkit-animation: swing-in-right-fwd 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3.3s both;
animation: swing-in-right-fwd 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3.3s both;
}
.swing-out-bottom-bck-3 {
-webkit-animation: swing-out-bottom-bck 0.65s cubic-bezier(0.600, -0.280, 0.735, 0.045) 4.6s both;
animation: swing-out-bottom-bck 0.65s cubic-bezier(0.600, -0.280, 0.735, 0.045) 4.6s both;
}
.swing-in-bottom-bck-4 {
-webkit-animation: swing-in-bottom-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 6s both;
animation: swing-in-bottom-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 6s both;
}
.swing-in-top-fwd-5 {
-webkit-animation: swing-in-top-fwd 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) 8s both;
animation: swing-in-top-fwd 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) 8s both;
}
.swing-out-left-fwd-6 {
-webkit-animation: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) 7s both;
animation: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) 7s both;
}
.swing-out-top-bck-7 {
-webkit-animation: swing-out-top-bck 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 8.3s both;
animation: swing-out-top-bck 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 8.3s both;
}
.swing-in-top-bck-8 {
-webkit-animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 9.7s both;
animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 9.7s both;
}
#-webkit-keyframes swing-out-right-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
100% {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
}
#keyframes swing-out-right-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
100% {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
}
#-webkit-keyframes swing-in-right-fwd {
0% {
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
}
#keyframes swing-in-right-fwd {
0% {
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
}
#-webkit-keyframes swing-out-bottom-bck {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
100% {
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
}
#keyframes swing-out-bottom-bck {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
100% {
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
}
#-webkit-keyframes swing-in-bottom-bck {
0% {
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
}
#keyframes swing-in-bottom-bck {
0% {
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#-webkit-keyframes swing-out-left-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 1;
}
100% {
-webkit-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 0;
}
}
#keyframes swing-out-left-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 1;
}
100% {
-webkit-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 0;
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
}
#-webkit-keyframes swing-in-top-bck {
0% {
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#keyframes swing-in-top-bck {
0% {
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
You could make all the animations the same duration and control their timings using percentages rather than animation-delay. This way using infinite will repeat all of them the same way.
A possible way to do that easily would be to use either JavaScript or a preprocessor. Here is an example using Sass (SCSS). This should also let you easily tweak the values of your animation to get the exact result you want. In this example, each group of values in $timings represents in this order: start time, duration, timing function, transform origin, start angle and final angle.
$duration: 10.5s;
$bezier1: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$bezier2: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$timings:
2.0s .75s $bezier1 right 0deg 70deg,
3.3s .60s $bezier2 right -100deg 0deg,
4.6s .65s $bezier1 bottom 0deg 100deg,
6.0s .60s $bezier2 bottom -70deg 0deg,
7.0s .55s $bezier1 left 0deg -70deg,
8.0s .70s $bezier2 top -100deg 0deg,
8.3s .75s $bezier1 top 0deg -100deg,
9.7s .60s $bezier2 top 70deg 0deg;
#for $i from 1 through length($timings) {
$data: nth($timings, $i);
$from: 100% * nth($data, 1) / $duration;
$to: 100% * (nth($data, 1) + nth($data, 2)) / $duration;
$transform: rotate#{if(nth($data, 4) == left or nth($data, 4) == right, Y, X)};
#keyframes anim-#{$i} {
from, #{$from} {
transform: #{$transform}#{'('}nth($data, 5)#{')'};
opacity: if(nth($data, 5) == 0deg, 1, 0);
}
#{$to}, to {
transform: #{$transform}#{'('}nth($data, 6)#{')'};
opacity: if(nth($data, 6) == 0deg, 1, 0);
}
}
.anim-#{$i} {
transform-origin: nth($data, 4);
animation: anim-#{$i} $duration nth($data, 3) infinite alternate;
}
}
Codepen fork
Note: to improve readability I also included prefixfree and got rid of the prefixed versions.
If you don't want to use a preprocessor on your side, you can just grab the generated CSS from Codepen directly ("View Compiled CSS" in the dropdown of the CSS area) or another online tool.
Related
how can I use some animation on dropdowns?
Take a look on stripe.com footer and click on location or language links. I've record a video of this effect:
https://www.youtube.com/watch?v=WV0h2zlE7fQ or worse GIF version http://g.recordit.co/w1S4fSrUBA.gif
It would be nice if some of those libs can be used:
Dynamics.js
Animate.css
My external html/js/css coder told me, that is impossible due fact, that Bootstrap 4 use transform property for positioning of dropdown menu itself.
Prepered jsfiddle with default bootstrap setup. https://jsfiddle.net/7hq03Lov/4/
Additional question - can be some any other animation applied on modal too?
You can do it via css, Change as per your need.
.dropdown .dropdown-menu{
-webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
I have page structure as bellow:
<head>
<style>
.windows8 {
position: relative;
width: 78px;
height:78px;
margin:auto;
margin-top: 200px;
}
.windows8 .wBall {
position: absolute;
width: 74px;
height: 74px;
opacity: 0;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
animation: orbit 6.96s infinite;
-o-animation: orbit 6.96s infinite;
-ms-animation: orbit 6.96s infinite;
-webkit-animation: orbit 6.96s infinite;
-moz-animation: orbit 6.96s infinite;
}
.windows8 .wBall .wInnerBall{
position: absolute;
width: 10px;
height: 10px;
background: rgb(93, 147, 195);
left:0px;
top:0px;
border-radius: 10px;
}
.windows8 #1wBall_1,.windows8 #wBall_1 {
animation-delay: 1.52s;
-o-animation-delay: 1.52s;
-ms-animation-delay: 1.52s;
-webkit-animation-delay: 1.52s;
-moz-animation-delay: 1.52s;
}
.windows8 #1wBall_2,.windows8 #wBall_2 {
animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.windows8 #1wBall_3,.windows8 #wBall_3 {
animation-delay: 0.61s;
-o-animation-delay: 0.61s;
-ms-animation-delay: 0.61s;
-webkit-animation-delay: 0.61s;
-moz-animation-delay: 0.61s;
}
.windows8 #1wBall_4,.windows8 #wBall_4 {
animation-delay: 0.91s;
-o-animation-delay: 0.91s;
-ms-animation-delay: 0.91s;
-webkit-animation-delay: 0.91s;
-moz-animation-delay: 0.91s;
}
.windows8 #1wBall_5,.windows8 #wBall_5 {
animation-delay: 1.22s;
-o-animation-delay: 1.22s;
-ms-animation-delay: 1.22s;
-webkit-animation-delay: 1.22s;
-moz-animation-delay: 1.22s;
}
#keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
#-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}
30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}
76% {
opacity: 0;
-o-transform:rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
#-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}
30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}
76% {
opacity: 0;
-ms-transform:rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
#-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
#-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}
30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}
76% {
opacity: 0;
-moz-transform:rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
</style>
<!-- 4-5 style links-->
<!-- 4-5 scripts -->
<!-- for testing you can put following code
for(var i=0;i<-1;i++){console.log(i)}
-->
</head>
<body>
<app>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>
</app>
</body>
It renders the divs with all its css(e.g ball radius and background-color etc.) but key-frame(i.e. transition/movement) of ball are not working upto some time (until all css/js is downloded and parsed) but after that it works fine.
I thought may be while loading and parsing css/js the rendering engine will be busy so it can't execute transition but when I took a look on other web-pages they uses css loaders as I do and it is working fine. So how their animation is working when mine not.
Because browser tabs are single threaded. Some browsers are single threaded, entirely.
If the JavaScript never stops running in some browsers you can’t even close the tab.
If you want the DOM to repaint, or canvas to animate, or the page to be clickable, you can not lock JS up. Which means that you have to learn different programming paradigms to break up long-running processes.
I have developed an slide automatic, very simple indeed.
I would like to add animation effects to the text, as this examples:
Demo 1
Demo 2
could help with some example or step that I must follow to adapt the effects of animation in the slide
Code complete:
$(function() {
var SliderModule = (function() {
var pb = {};
//Defaul #slider > div
pb.el = $('#slider > .carousel');
pb.items = {
panel: pb.el
}
var SliderInterval,
currentSlider = 0,
nextSlider = 1,
lengthSlider = pb.items.panel.length;
// Initialize
pb.init = function(settings) {
this.settings = settings || {duration: 8000}
var output = '';
SliderInit();
for(var i = 0; i < lengthSlider; i++) {
if (i == 0) {
output += '<div class="active"></div>';
} else {
output += '<div></div>';
}
}
}
var SliderInit = function() {
$("#barra").animate({
width:"100%"
},
pb.settings.duration,
"linear",
pb.startSlider
);
}
pb.startSlider = function() {
$("#barra").css("width", 0);
var panels = pb.items.panel,
controls = $('#slider-controls div');
if (nextSlider >= lengthSlider) {
nextSlider = 0;
currentSlider = lengthSlider-1;
}
controls.removeClass('active').eq(nextSlider).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(nextSlider).fadeIn('slow');
currentSlider = nextSlider;
nextSlider += 1;
SliderInit();
}
var changePanel = function(id) {
$("#barra").stop().css("width", 0);
var panels = pb.items.panel,
controls = $('#slider-controls div');
if (id >= lengthSlider) {
id = 0;
} else if (id < 0) {
id = lengthSlider-1;
}
controls.removeClass('active').eq(id).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(id).fadeIn('slow');
currentSlider = id;
nextSlider = id+1;
SliderInit();
}
return pb;
}());
SliderModule.init({duration: 7000});
});
/*!
* #Design slider
*/
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.item {
width: 100%;
height: 548px !important;
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
}
.slider-container {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 100%;
background-color:#FFF;
}
.slider-wrapper {
z-index: 90;
width: 100%;
height: 500px;
position: relative;
}
.slider-wrapper > div {
display: none;
}
div.slide-current {
display: block;
}
.slider-wrapper div .item {
top: 0;
left: 0;
height: auto;
max-width: 100%;
position: absolute;
}
.slider-inner {
top: 0;
left: 0;
width: 100%;
color: #fff;
height: 100%;
position: absolute;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.carousel-content {
text-align: center;
}
#slider .slider-inner h2 {
margin-top: 180px;
font-size: 36px;
line-height: 1;
text-transform: uppercase;
color: #fff;
}
.btn {
cursor: pointer;
user-select: none;
text-align: center;
border-radius: 4px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
background-image: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#slider .slider-inner .btn {
font-size: 18px;
border-width: 0;
margin-top: 10px;
line-height: 1.33;
border-radius: 6px;
padding: 10px 16px;
background: #72C05B;
border-color: #72C05B;
}
#barra {
width: 0%;
z-index: 99;
height: 10px;
margin-top: 15px;
position: relative;
background: #00c5b9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
<div id="slider" class="slider-wrapper">
<div class="carousel slide-current">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg1.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation</h2>
</div>
</div>
</div>
<div class="carousel">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg2.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation 2</h2>
</div>
</div>
</div>
<div class="carousel">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg1.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation 3</h2>
</div>
</div>
</div>
</div>
<div id="barra"></div>
</div>
For your text animation use this css it will help you to build you text animation. This will work for text/image and html elements also.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================
Made by NK Chaudhary
Questions, comments, concerns, love letters:
nkchaudhary13#gmail.com
==============================================
*/
/*
==============================================
slideDown
==============================================
*/
.logo{
height: 52px;
margin-top: -15px;
}
.logo:hover{
opacity:0.8;
transiftion:1s;
}
.slideDown{
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes slideDown {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
slideUp
==============================================
*/
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
slideLeft
==============================================
*/
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideRight
==============================================
*/
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideExpandUp
==============================================
*/
.slideExpandUp{
animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;
visibility: visible !important;
}
#keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30%{
transform: translateY(-8%) scaleX(0.5);
}
40%{
transform: translateY(2%) scaleX(0.5);
}
50%{
transform: translateY(0%) scaleX(1.1);
}
60%{
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100%{
transform: translateY(0%) scaleX(1);
}
}
#-webkit-keyframes slideExpandUp {
0% {
-webkit-transform: translateY(100%) scaleX(0.5);
}
30%{
-webkit-transform: translateY(-8%) scaleX(0.5);
}
40%{
-webkit-transform: translateY(2%) scaleX(0.5);
}
50%{
-webkit-transform: translateY(0%) scaleX(1.1);
}
60%{
-webkit-transform: translateY(0%) scaleX(0.9);
}
70% {
-webkit-transform: translateY(0%) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleX(0.95);
}
90% {
-webkit-transform: translateY(0%) scaleX(1.02);
}
100%{
-webkit-transform: translateY(0%) scaleX(1);
}
}
/*
==============================================
expandUp
==============================================
*/
.expandUp{
animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes expandUp {
0% {
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
transform: translateY(-7%) scaleY(1.12);
}
75%{
transform: translateY(3%);
}
100% {
transform: translateY(0%) scale(1) scaleY(1);
}
}
#-webkit-keyframes expandUp {
0% {
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
-webkit-transform: translateY(-7%) scaleY(1.12);
}
75%{
-webkit-transform: translateY(3%);
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
}
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
/*
==============================================
expandOpen
==============================================
*/
.expandOpen{
animation-name: expandOpen;
-webkit-animation-name: expandOpen;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
#keyframes expandOpen {
0% {
transform: scale(1.8);
}
50% {
transform: scale(0.95);
}
80% {
transform: scale(1.05);
}
90% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes expandOpen {
0% {
-webkit-transform: scale(1.8);
}
50% {
-webkit-transform: scale(0.95);
}
80% {
-webkit-transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
}
}
/*
==============================================
bigEntrance
==============================================
*/
.bigEntrance{
animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
#keyframes bigEntrance {
0% {
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
#-webkit-keyframes bigEntrance {
0% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
/*
==============================================
hatch
==============================================
*/
.hatch{
animation-name: hatch;
-webkit-animation-name: hatch;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
#keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
#-webkit-keyframes hatch {
0% {
-webkit-transform: rotate(0deg) scaleY(0.6);
}
20% {
-webkit-transform: rotate(-2deg) scaleY(1.05);
}
35% {
-webkit-transform: rotate(2deg) scaleY(1);
}
50% {
-webkit-transform: rotate(-2deg);
}
65% {
-webkit-transform: rotate(1deg);
}
80% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
/*
==============================================
bounce
==============================================
*/
.bounce{
animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0%) scaleY(0.6);
}
60%{
-webkit-transform: translateY(-100%) scaleY(1.1);
}
70%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
}
}
/*
==============================================
pulse
==============================================
*/
.pulse{
animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
/*
==============================================
floating
==============================================
*/
.floating{
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
tossing
==============================================
*/
.tossing{
animation-name: tossing;
-webkit-animation-name: tossing;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
#-webkit-keyframes tossing {
0% {
-webkit-transform: rotate(-4deg);
}
50% {
-webkit-transform: rotate(4deg);
}
100% {
-webkit-transform: rotate(-4deg);
}
}
/*
==============================================
pullUp
==============================================
*/
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*
==============================================
pullDown
==============================================
*/
.pullDown{
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*
==============================================
stretchLeft
==============================================
*/
.stretchLeft{
animation-name: stretchLeft;
-webkit-animation-name: stretchLeft;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
}
#keyframes stretchLeft {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchLeft {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
/*
==============================================
stretchRight
==============================================
*/
.stretchRight{
animation-name: stretchRight;
-webkit-animation-name: stretchRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
#keyframes stretchRight {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
</style>
</head>
<body>
<div class="timeline-image pulse">
<h2 class="section-heading">My Amazing Team</h2>
</div>
</body>
</html>
I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle:
jsFiddle Link
HTML Code:
<div id="coin-flip">
<button id="btnFlip">Flip the Coin</button></br></br></br>
<div id="coin-flip-cont">
<div id="coin"></div>
</div></br></br></br>
<h2 id="result"></h2>
</div>
Javascript, jQuery Code:
$(function() {
var coin = {
sideOne: "./img/image1.png",
sideTwo: "./img/image2.png"
}
$("#btnFlip").click(function() {
$("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
});
});
CSS is from Animate.css, You can view it in the Fiddle.
Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.
EDIT: Just adding this as an example of what I would like to achieve http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2
I feel that this can be done in a much simpler way and with the css that I already have.
First of all, change this line of your HTML code :
<button id="btnFlip">Flip the Coin</button>
To :
<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>
And then change your javascript to this code :
function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
if (document.getElementById("coin").src == coin_1){
document.getElementById("coin").src == coin_2
}
if (document.getElementById("coin").src == coin_2){
document.getElementById("coin").src == coin_1
}
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}
This javascript code flips the coin 8 times before choosing a random side to land on.
you can use animationend event to detect when the CSS animation ended.
Then you execute code to change the image source.
JQuery
$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$("#coin").removeClass('animateCoin');
setTimeout(function() {
var srcImg = $($('#coin img')[0]).attr('src');
if (srcImg === coin.heads)
$($('#coin img')[0]).attr('src',coin.tails);
else
$($('#coin img')[0]).attr('src',coin.heads);
$("#coin").addClass('animateCoin');
},50);
});
CSS :
.animateCoin {
animation: flip 1s;
}
Here is the complete code you can flip coin 2 sided solution run snippet.
To watch correct result see in full page view otherwise you can see on codepen.
You can have link of codepen too click here
jQuery(document).ready(function($){
var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];
function getSpin() {
var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
return spin;
}
$('#flip').on('click', function(){
$('#coin').removeClass();
setTimeout(function(){
$('#coin').addClass(getSpin());
}, 100);
});
});
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}
#coin-flip-cont {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
#coin .front, #coin .back {
position: absolute;
width: 200px;
height: 200px;
}
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: #3498db;
border: solid 5px gray;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
border: solid 5px gray;
}
#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards;
animation: rotate900 3s linear forwards;
}
#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards;
animation: rotate1080 3s linear forwards;
}
#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards;
animation: rotate1260 3s linear forwards;
}
#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards;
animation: rotate1440 3s linear forwards;
}
#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards;
animation: rotate1620 3s linear forwards;
}
#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards;
animation: rotate1800 3s linear forwards;
}
#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards;
animation: rotate1980 3s linear forwards;
}
#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards;
animation: rotate2160 3s linear forwards;
}
#-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#-webkit-keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#-webkit-keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#-webkit-keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#-webkit-keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#-webkit-keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#-webkit-keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
#keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 125px;
position: inherit;
}
.front-text{
font-weight: 700 !important;
margin-top: 45%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div>
<div id="coin-flip-cont">
<div id="coin">
<div class="front"><p class="front-text">Head</p></div>
<div class="back"><p class="front-text">Tail</p></div>
</div>
</div>
<button type="button" id="flip" class="button"> Flip Coin</button>
</div>
</center>
I got the particle to move around which is what I wanted, but I want to add a little trail that will fade a way and I am not sure how to go about doing that
Is it possible to do with only css? or do I have to involve jquery in this?
Here is a demo: LINK
#object{
position: absolute;
bottom:-2em;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#-webkit-keyframes myOrbit {
0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -moz-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -moz-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -moz-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -moz-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -o-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -o-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -o-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -o-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#keyframes myOrbit {
0% { transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }}
I was doing something similar which is how I found this question. I took what I came up with and adapted it to your answer. Not sure it will work for what you're doing but it's still fun.
http://jsfiddle.net/y40kwyhr/2/
var obj = document.getElementById("object");
class Particle {
constructor(parent) {
this.div = document.createElement("div");
this.div.classList.add("particle");
this.div.classList.add("twinkle");
this.div.id = "particle-" + Date.now();
parent.appendChild(this.div);
setTimeout(() => { // remove particle
if(this.driftIntervalId) clearInterval(this.driftIntervalId);
this.div.remove();
}, 400);
}
drift(speed = 1) {
var rad = Math.PI * Math.random();
this.driftIntervalId = setInterval(() => {
var left = +this.div.style.left.replace("px",'');
var top = +this.div.style.top.replace("px",'');
left += Math.sin(rad) * speed;
top += Math.cos(rad) * speed;
this.div.style.left = left + "px";
this.div.style.top = top + "px";
}, 10);
}
}
var particleFactory = function(meteor) {
var rect = meteor.getBoundingClientRect();
var particle = new Particle(meteor.parentElement);
particle.div.style.left = rect.left + "px";
particle.div.style.top = rect.top + "px";
particle.drift(0.4);
setTimeout(() => {
particleFactory(meteor);
}, 100);
};
particleFactory(obj);
Something like this?
Changed keyframe animation so it orbits correctly
Added new animation for the 'trail' to fadeout over time.
Is this what you meant?
#object{
position: absolute;
top: 200px;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#object:after{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
margin: 0 auto;
width: 100px;
height: 10px;
opacity: .1;
background-color: red;
-webkit-animation: myOrbit-fadeout 6s linear infinite;
-moz-animation: myOrbit-fadeout 6s linear infinite;
-o-animation: myOrbit-fadeout 6s linear infinite;
animation: myOrbit-fadeout 6s linear infinite;
}
#-webkit-keyframes myOrbit {
0% { -webkit-transform: rotate(0deg) translateY(200px); }
25% { -webkit-transform: rotate(90deg) translateY(200px); }
50% { -webkit-transform: rotate(180deg) translateY(200px); }
75% { -webkit-transform: rotate(270deg) translateY(200px); }
100% { -webkit-transform: rotate(360deg) translateY(200px); }
}
#-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateY(200px); }
25% { -moz-transform: rotate(90deg) translateY(200px); }
50% { -moz-transform: rotate(180deg) translateY(200px); }
75% { -moz-transform: rotate(270deg) translateY(200px); }
100% { -moz-transform: rotate(360deg) translateY(200px); }
}
#-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateY(200px); }
25% { -o-transform: rotate(90deg) translateY(200px); }
50% { -o-transform: rotate(180deg) translateY(200px); }
75% { -o-transform: rotate(270deg) translateY(200px); }
100% { -o-transform: rotate(360deg) translateY(200px); }
}
#keyframes myOrbit {
0% { transform: rotate(0deg) translateY(200px); }
25% { transform: rotate(90deg) translateY(200px); }
50% { transform: rotate(180deg) translateY(200px); }
75% { transform: rotate(270deg) translateY(200px); }
100% { transform: rotate(360deg) translateY(200px); }
}
#-webkit-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#-moz-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#-o-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}