I'm attempting to make a welcome page that, once you click on it, will fall by a CSS transition.
I can't figure out how to make the page fall, I can only make the button fall when the page loads.
here's what I have:
<style>
pt-page-rotateFall {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
animation: rotateFall 1s both ease-in;}
a {
color:black;
text-align:center;
-moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease;
-o-transition:all 1s ease; -ms-transition:all 1s ease;
}
a:focus {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
}
Welcome
You will need Javascript to do that. You could either handle the animation itself in Javascript completely, or add a click event listener and give the element the class pt-pate-rotateFall within the handler.
Related
I have a mini game of a deck of cards that when a card is clicked I have a css animation to flip the card over.
I have a second css class that I add with jQuery to animate the cards if they match. However when I add the second css class the animation does not play because of the first css animation class. If I was to remove the class flip the second animation will play but I cannot do this as I need to keep the flip class.
.card {
position: relative;
height: 6rem;
border-radius: 5px;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 5px 5px 0px 0px rgba(218,218,218,1);
}
.card:active {
transform: scale(0.97);
transition: transform .2s;
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 5px;
}
.card.flip {
transform: rotateY(180deg);
}
.card-front {
transform: rotateY(180deg);
}
Now when I add the class .card-heartbeat ti the element which already has the classes card flip nothing happens
.card-heartbeat {
-webkit-animation: heartbeat 1.5s ease-in-out both;
animation: heartbeat 1.5s ease-in-out both;
}
/**
* ----------------------------------------
* animation heartbeat
* ----------------------------------------
*/
#-webkit-keyframes card-heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes card-heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
I am wondering is a clash of transform?
adding rotateY(180deg) fixed the issue in the animation
So I am working on a SVG animation of a simple stopwatch using CSS transform: rotate() and it works perfectly on webkit browsers like chrome, and safari. However on Firefox it behaves quite differently where the second hand which I am trying to animate flies off it's axis. I created a codepen of it here.
#stopwatch {
position: relative;
}
.stopwatch-st0{fill:#E65E39;}
.stopwatch-st1{fill-rule:evenodd;clip-rule:evenodd;fill:#34312D;}
.stopwatch-st2{fill:#34312D;}
#stopwatch:hover #second-hand {
-webkit-animation: secondAnimate 1s ease;
animation: secondAnimate1 1s ease;
}
#second-hand {
--webkit-transform-origin: 12% 78%;
transform-origin: 12% 78%;
/*transform: rotate(-55deg);*/
-webkit-animation: secondAnimate 1s ease;
animation: secondAnimate 1s ease;
}
#-webkit-keyframes secondAnimate {
0% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes secondAnimate1 {
0% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
http://codepen.io/timherbert/pen/bBXaMW
I am trying to auto rotate an image after ever 5 seconds from css. My code is working but only on hover but I want on both hover and without hover. So far I have done is given below.
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
<div class="circle-border">
<img class="img-circle" src="images/web.jpg" alt="service 1">
</div>
Thanks in advance
You need an animation not a transtion.
CSS Animations # MDN
This animation is 6s long but the rotation only takes place in the last 1/6th of the duration....which gives us a 1s animation every 5 seconds.
div {
width: 100px;
height: 100px;
background: #663399;
margin: 1em auto;
-webkit-animation-name: spinner;
animation-name: spinner;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div></div>
I used Javascrit to do it however it's still can made with css alone
but maybe usefull, hope it can help
var circle = document.getElementById("test");
if (circle.classList.contains("move")) {
setInterval(function () {
"use strict";
circle.classList.add("move");
}, 2000);
setInterval(function () {
"use strict";
circle.classList.remove("move");
}, 5000);
}
.circle-border {
width:100px;
height:100px;
background-color:#F00;
}
.move {
animation: circle .9s ease 1;
}
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
#keyframes circle {
0% {transform:rotate(0)}
100% { transform:rotate(720deg)}
}
<div id="test" class="circle-border move">
</div>
I would like to rotate an image 180 degrees when it is clicked. Then rotate that same image a further 180 degrees (completing the revolution) on subsequent click.
I have achieved the first part using:
.img_rotator_180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.img_rotator_360 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.img_rotator_transition {
-webkit-transition: all 1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 1s ease-out; /* Firefox 4-15 */
-o-transition: all 1s ease-out; /* Opera 10.50–12.00 */
transition: all 1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+
}
And
$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
Alternative version:
$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
What happens with this is that the images initial rotation is not remembered meaning that the second rotation effectively redoes the 180 degree rotation.
Is there a way to establish the images current rotation before applying further transformation? Or perhaps a way to append rotation rather than replace it?
Thank you
Demo Fiddle
HTML
<div>Click Me!</div>
jQuery
$('div').on('click', function () {
if ($(this).hasClass('spinIn')) {
$(this).addClass('spinOut').removeClass('spinIn');
} else {
$(this).addClass('spinIn').removeClass('spinOut');
}
});
CSS
div {
display:inline-block;
}
.spinIn {
-webkit-animation: spinIn 0.6s 1 linear;
animation: spinIn 0.6s 1 linear;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
#-webkit-keyframes spinIn {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes spinIn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.spinOut {
-webkit-animation: spinOut 0.6s 1 linear;
animation: spinOut 0.6s 1 linear;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
#-webkit-keyframes spinOut {
0% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinOut {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
I want my leaf animate towards certain directions while slowing down its speed. I tried using ease-out to implement this effect. However, this causes my leaf to ease-out when going one direction (from 0% to 75%) and once again when going another direction (at 75% to 100%).
How do I make my leaf go directions and constantly slow down (not ease-out at every turn)?
#leaf {
height:100px;
width:100px;
animation: leaf 10s infinite ease-out;
-webkit-animation: leaf 10s infinite ease-out;
}
#keyframes leaf {
0% {
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
transform: translate(200px, 300px) rotateZ(270deg);
}
100% {
transform: translate(0px, 600px) rotateZ(360deg);
}
}
#-webkit-keyframes leaf {
0% {
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
-webkit-transform: translate(200px, 300px) rotateZ(270deg);
}
100% {
-webkit-transform: translate(0px, 600px) rotateZ(360deg);
}
}
What you are using is ease-out but what you need is animation-timing-function: linear;
Demo
It can be done, but the math is not easy.
I get it just by trial and error.
You need to set a timing function for each step, and somehow adapt it to your needs.
A demo:
div {
position: absolute;
left: 10px;
top: 10px;
height:100px;
width:100px;
}
.leaf {
animation: leafa 10s infinite ease-out;
-webkit-animation: leaf 10s infinite ease-out;
animation: leaf 10s infinite ease-out;
background-color: aqua;
}
.mark {
animation: mark 10s infinite ease-out;
-webkit-animation: mark 10s infinite ease-out;
animation: mark 10s infinite ease-out;
border: solid 1px blue;
}
#-webkit-keyframes leaf {
0% { -webkit-transform: translateX(0px);
-webkit-animation-timing-function: cubic-bezier(0.4, 0.4, 0.45, 0.6);
}
35% { -webkit-transform: translateX(200px);
-webkit-animation-timing-function: cubic-bezier(0.4, 0.765, 0.6, 0.8);
}
100% { -webkit-transform: translateX(400px);
}
}
#-webkit-keyframes mark {
0% { -webkit-transform: translateX(0px); }
100% { -webkit-transform: translateX(400px); }
}
#keyframes leaf {
0% { transform: translateX(0px);
animation-timing-function: cubic-bezier(0.4, 0.4, 0.45, 0.6);
}
35% { transform: translateX(200px);
animation-timing-function: cubic-bezier(0.4, 0.765, 0.6, 0.8);
}
100% { transform: translateX(400px);
}
}
#keyframes mark {
0% { transform: translateX(0px); }
100% { transform: translateX(400px); }
}
fiddle
The mark has an standard ease out animation over the full transform. The leaf has 2 segments, and each one of them has a cubic bezier timing function.
The result is that the leaf almost matches the mark. It can be done as good as you want, it's only a matter of trying (or knowing more math that I do).
You can find this link useful.