I tried a lot of things but nothing is working, idk if its a transform/translateX thing or not. I tried fading and it worked, but bouncing and the translateX is not working. I am currently using brakets software and I also tried sublime test 2. Please help.
Thanks.
/*animations*/
/******************
* Bounce in right *
*******************/
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slow{
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slower{
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slowest{
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
opacity:0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight,
.rotateInDownLeft, .rotateDownUpRight, .rollIn{
opacity:0;
}
.lightSpeedInRight, .lightSpeedInLeft{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
/***********
* bounceIn *
************/
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz- transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
}
/****************
* bounceInRight *
****************/
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
30%{
-webkit-transform: translateX(100px)
}
60% {
-webkit-transform: translateX(-10px);
}
80% {
-webkit-transform: translateX(5px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 1;
-moz- transform: translateX(100px);
}
30%{
-moz- transform: translateX(100px)
}
60% {
-moz-transform: translateX(-10px);
}
80% {
-moz-transform: translateX(5px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
.bounceInRight.go {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
}
You need the unprefixed properties.
So for example:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s; // unprefixed
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-duration: 1s; // unprefixed
}
Thank you for your help. I have found the answer. My html code had something wrong which was:
style='display:inline, it works on chrome but for Firefox and Safari you should use this: style='display:inline-block.
Thanks again.
At first, check your syntax. I have noticed that there are some "broken" properties, written '-moz- transform'. It should be one word.
Second, could you provide some HTML or a jsfiddle?
(I could not post it as a comment - not enough reputation to do that.)
Related
I want to use a rotating/spinning letter as my loader on a website. I want it to rotate through the center.
I have used transform-origin: center center; as mentioned here. But no help.
Can some fix this? Thanks!
Also, Is this the right approach? Please mention if there is any better of achieving this?
(I don't want to go with the svg.)
CSS
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 2rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
Do this. First, centralize the letter both vertically and horizontally to the center of the page. Then apply rotation animation to the letter. It should work. Don't add any sort of width to the text. Otherwise, the text will left align itself in that width and the animation will look weird.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
animation: Rotate infinite 1s;
font-size: 50px;
}
#keyframes Rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p>M</p>
Change the display from block to inline-block and remove the width:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
display: inline-block;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
width is set to 2 rem, which makes the letter to go outside the container, around whose center it rotates (the letter needs more space). Set width to 5rem and you are set:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 5rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
I've got the following animation. What I'm trying to do is when the animation reaches 50% I want it to stay there for 8 seconds.
If I change animation-duration: 3s; to 8s its is painfully slow.
And the transition-duration: 0.5s; doesn't seem to have any effect whatsoever.
I also tried adding animation-duration: 5s; to 50% {} but that doesn't do anything either.
Any suggestions on how to accomplish this?
html body div#size_cont div#dirt_specs {
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-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;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
transform: scale(1.4,1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
This is what you need to do in your animation frames:
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
And simply set your animation-duration to 11s.
Explanation:
Since your original animation was 3 seconds long, and your requirement is to include a 8 second delay in the middle, the entire animation becomes 11 seconds.
This means that 1.5s goes into the first transition, 8s goes into the frozen segment, and 1.5s goes into the ending transition.
With that said, you need to get the % at which 1.5s is done out of 11s, which 1.5/11 = 0.136, hence the 13.6%.
The 86.4% is calculated from the reverse, 1 - 1.5/11 = 0.864, and this is needed because you want to maintain this animation state up (i.e., the frozen segment) until the last 1.5s of the animation.
See below for a working example:
div {
height: 150px;
width: 150px;
background: red;
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-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;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 11s;
-moz-animation-duration: 11s;
-o-animation-duration: 11s;
animation-duration: 11s;
transform: scale(1.4, 1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
<div></div>
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
Hi guys a while back i posted a question regarding a banner i was making, well i have the animation working now but i cant get -webkit-transform: translateX(-40%) to work when i combine it with position:absolute.
The problem is i have 3 images and 3 bits of text that i need to fly onto the screen one after the other and end up overlapping which is why i was trying to use position:absolute but i cant get -webkit-transform: translateX(-40%) to work when i do this however i can get -webkit-transform: translateX(-40px) to work but that doesn't help me as i want it to be the same on different screen sizes. Does anybody know how i can get my animation to work with -webkit-transform: translateX(-40%) and have multiple images overlapping?
Example Code:
Html:
<div class="text3" id="txt3">
Moving Text
</div>
Css:
#txt3{
position:absolute;
top: 150px;
z-index: 1;
}
.text3 {
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 15s;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 15s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: both;}
#-webkit-keyframes text3 {
0% {
-webkit-transform: translateX(-40%)
;opacity: 1;
}
3% {
-webkit-transform: translateX(-40%)
}
30% {
-webkit-transform: translateX(20%)
}
37% {
-webkit-transform: translateX(20%)
;opacity: 1;
}
50% {
-webkit-transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
-webkit-transform: translateX(35%)
}
}
#-moz-keyframes text3 {
0% {
-moz-transform: translateX(-40%)
;opacity: 1;
}
3% {
-moz-transform: translateX(-40%)
}
30% {
-moz-transform: translateX(20%)
}
37% {
-moz-transform: translateX(20%)
;opacity: 1;
}
50% {
-moz-transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
-moz-transform: translateX(35%)
}
}
#-o-keyframes text3 {
0% {
-o-transform: translateX(-40%)
;opacity: 1;
}
3% {
-o-transform: translateX(-40%)
}
30% {
-o-transform: translateX(20%)
}
37% {
-o-transform: translateX(20%)
;opacity: 1;
}
50% {
-o-transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
-o-transform: translateX(35%)
}
}
#keyframes text3 {
0% {
transform: translateX(-40%)
;opacity: 1;
}
3% {
transform: translateX(-40%)
}
30% {
transform: translateX(20%)
}
37% {
transform: translateX(20%)
;opacity: 1;
}
50% {
transform: translateX(35%)
;opacity: 0;
}
100% {
opacity: 0;
transform: translateX(35%)
}
}
.text3 {
-webkit-animation-name: text3;
-moz-animation-name: text3;
-o-animation-name: text3;
animation-name: text3;
}
Here are some working example of the animation:
-webkit-transform: translateX(-40%)
position:absolute
Any Help would be greatly appreciated.
crackruckles
I have been working on an animation of a ball rolling and falling off an edge. First, I made a version which just rolls, and then stops. Working fine. But then, when I added the falling animation to the same code, it doesn't roll it, and I can't do anything about it.
Here is the first snippet:
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
then the second:
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(480px) rotate(360deg);
}
85% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
95% {
animation-timing-function: ease-out;
-webkit-transform: translate(480px, 380px);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px);
}
}
(I know it's only for safari and chrome, but I want to finish it before making it accessible in every browser)
And here is the link to the animation.
Thanks for any help!
EDIT:
It seems it wasn't exactly clear what I want it to do, so
here you can check out what the first snippet does.
A better way, seems to 'chain' the animations:
#goRight img:hover{
-webkit-animation: roll 1s, fall 1s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
#-webkit-keyframes fall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px);
}
100% {
-webkit-transform: translateX(480px) translateY(400px);
}
}
Much cleaner!
disclaimer: I'm no expert in CSS3, but after some tweaking, this seems to work... ish.
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
5% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(48px) rotate(36deg);
}
25% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(240px) rotate(180deg);
}
30% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(284px) rotate(216deg);
}
50% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px) rotate(360deg);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
}
I've created some smaller increments, to tell the engine it should animate in a certain direction; if you put 180deg half way, it seems to roll in the opposite direction.
Needs some tweaking for a smoother animation, probably.