Is it possible to have 2 #-webkit-keyframes on 1 css? Like
#-webkit-keyframes pulse_one{
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); background-color: #b81900; }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#-webkit-keyframes pulse_two{
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); background-color: #eea236; }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#pulseOne
{
-webkit-animation-name: 'pulse_one';
-webkit-animation-duration: 5000ms;
-webkit-transform-origin:70% 70%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#pulseTwo
{
-webkit-animation-name: 'pulse_two';
-webkit-animation-duration: 5000ms;
-webkit-transform-origin:70% 70%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
I got the error saying "Unexpected token WEBKIT_KEYFRAMES_SYM found". But my 2 animation above works perfectly fine on my page. Im just curious and its kinda bug me a little when have a red line on my code. Any help is apreciated. Thanks :)
Related
I am a bit confused on how keyframes work exactly in this demo. Whats confusing me is that 0% and 100% are not defined but 25% and 75% are. But at 0% the 25% keyframe is active. I thought it wouldn't be active until 25% through the animation until it hits the 75% keyframe. Also when does the 75% keyframe stop 100%? If you could explain exactly what is happening it would be appreciated. I hope this question is clear. Thanks.
#-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
25% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
width: 50px;
height: 50px;
background-color: blue;
}
.pulse:hover {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<div class="pulse">
</div>
hi if you don't need animation to happen then add
#keyframes <animation name>
{
0%,25%
{
animation here
}
75%,100%
{
animation here
}
}
what happens here is animation don't start up-to 25%, from 25% to 75% animation plays and stops after 75% until it reaches 100%
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); }
}
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.
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
Hello i create animation for my box and all work in chrome. But in firefox dont work.
I try to use -moz- but again nothing.
CSS code for animation what i using is :
#-webkit-keyframes pulse {
from {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}
div.pulse { opacity: 0.75; }
div.pulse:hover {
-moz-animation-name: pulse;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
}
Anyone can tell what i do wrong? Whay dont work in mozila?
You need to define the FF version of the animation and transform as well as the webkit version
#-moz-keyframes pulse { /* older versions of FF */
from {
-moz-transform: scale(1.0);
opacity: 0.75;
}
50% {
-moz-transform: scale(1.2);
opacity: 1.0;
}
to {
-moz-transform: scale(1.0);
opacity: 0.75;
}
}
#keyframes pulse {
from {
transform: scale(1.0);
opacity: 0.75;
}
50% {
transform: scale(1.2);
opacity: 1.0;
}
to {
transform: scale(1.0);
opacity: 0.75;
}
}
Let me get this all straightened out for you.
Transformations:
There are 2 vendor specifics for the transform and they are "-webkit-" and "-ms-". -webkit- being for safari and chrome, and -ms-transform is only for IE9 suppport.
Animation Keyframes:
There is only 1 vendor specific for animation keyframes and that is -webkit-, which is for safari and chrome (no IE9 support at all).
Therefore you only need to worry about the -webkit- vendor specific for your situation, but you still have to do the non vendor specific one as well, especially since you want it to show up in firefox.
jsFiddle
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
100% {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}
#keyframes pulse {
0% {
transform: scale(1.0);
opacity: 0.75;
}
50% {
transform: scale(1.2);
opacity: 1.0;
}
100% {
transform: scale(1.0);
opacity: 0.75;
}
}
div.pulse { opacity: 0.75; }
div.pulse:hover {
animation-name: pulse;
animation-duration: 0.5s;
animation-iteration-count: 1;
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
}
.pulse{
background:red;
width:200px;
height:200px;
}
Each vendor has it's own implementation. Webkit refers to the layout engine that Apple's Safari browser and Google Chrome are powered by. Internet Explorer also has it's own vendor implementation. Here are all of the variations:
.transformed {
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
-ms-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
}
you are missing #-moz-keyframe
working example: http://codepen.io/anon/pen/mwEiD
CSS:
#-webkit-keyframes pulse {
from {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
opacity: 0.75;
}
}
#-moz-keyframes pulse {
from {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
opacity: 0.75;
}
}
#keyframes pulse {
from {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
opacity: 0.75;
}
}
div.pulse { opacity: 0.75; }
div.pulse:hover {
-moz-animation-name: pulse;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
}
.pulse{
background:red;
width:200px;
height:200px;
}