I'm trying to recreate the text that is rotating 3D in Y axis.
So I came up with the following and it is centered, but it does not do anything (I'm using SCSS by the way):
<div class="wrapper">
<div id="rotate-wrapper">
<div>
Rotate me
</div>
</div>
</div>
What could I be doing wrong? Explanations would be appreciated for purpose of learning.
Thank you in advance and will accept/upvote answer.
You need to actually make the rotation animation. In the site you specified, it is defined as:
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); } }
#keyframes rotation {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); } }
For an explanation on how CSS animations work, see this MDN article.
Related
I have a simple bounce in animation for my figure , see HTML below:
<figure>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
<figcaption>
<!-- empty for now -->
</figcaption>
</figure>
My CSS animation is as follows:
#keyframes drop-in-thumb {
0% {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0.8;
}
35% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
55% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
70% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
85% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
The fiddle can be seen HERE.
The problem is my animation is quite jerky , I.E. it does't have a realistic bounce in effect , it looks clearly quite jerky. My question is what other property in the keyframes apart form the % breakpoints can i use to tweak and make my animation smooth ?
Tweaking the % breakpoints really helped me make the animation much more smoother and but its really not yet realistic yet. What other CSS animation property can i use to make this animation smoother ?
It would be great if somebody could demonstrate how i could perfect and make this animation much more smoother.
P.S. i am aware of the library animate.css but don't want to use it.
The animation-timing-function property should improve this considerably.
Try adding the following to the styles for figure:
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
I've edited your fiddle to show the difference: https://jsfiddle.net/ssexmh3s/2/
Why isn't transform: scale(0); working on a animated element?
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#box {
width: 150px;
height: 150px;
background: red;
animation: spin .5s infinite linear;
transform: scale(0);
}
I guess its because the keyframe take over transform, but even with !important after transform: scale(0) its still not changing.
http://jsfiddle.net/yun0xu8t/1/
You need to move transform: scale(0); to #keyframes
To rotate and scale together
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg) scale(0); }
}
My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>
Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.
Here is the standard CSS I am trying to produce but want to use a LESS Mixin to do the work. You can check the working demo with pure css here
Pure CSS
#keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes rotate-fix {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
I'm using the same mixin as in the following post which is shown below.
.keyframes(#name, #frames) {
#-webkit-keyframes #name { #frames(); }
#-moz-keyframes #name { #frames(); }
#-ms-keyframes #name { #frames(); }
#-o-keyframes #name { #frames(); }
#keyframes #name { #frames(); }
}
I am using it like this:
.keyframes(rotate, {
0%{
.transform(rotate(0)); // This is transform mixin from LESSHat
}
100%{
.transform(rotate(180));
}
});
.keyframes(rotate-fix, {
0%{
.transform(rotate(0));
}
100%{
.transform(rotate(360));
}
});
However, it's not working. The animation of the button won't rotate. The code works fine when not including it as a mixin. Can anybody tell me what I'm missing here?
The generated CSS looks like this:
#-moz-keyframes rotate {
.....
}
#-o-keyframes rotate {
.....
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#-moz-keyframes rotate-fix {
.....
}
#-o-keyframes rotate-fix {
.....
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Be sure to interpolate
like this:
.keyframes(~'<keyframes-name>, <keyframes-definition>')
and take a look at Less Hat docs keyframes section.
I want a pulse effect on the div when it is clicked ..
I have made a jsfiddle for it.
#-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
Pulse Animation code
#-moz-keyframes pulse_animation{
0% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1.08); }
50% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1.05); }
80% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
It's working on Chrome very well but not in Firefox ..
You added quotes around the animation name, which made it fail, try this: http://jsfiddle.net/MrdvW/593/
-moz-animation-name: pulse_animation;
Also, you don't need the -moz- prefixes anymore with the current firefox versions.
Moz guide to animations
you haven't add a vendor prefix for Firefox. -moz-animation-name which is required for older version of Firefox only. Latest Firefox version fully support the standard version.
#keyframes your_animation_name is a standard and valid by w3c. you should also include it.
it works well withe latest FF and latest IE. however prefix version still required for webkit based browser.