I have the next code:
http://codepen.io/anon/pen/xGRzVq
<style>
#pulse {animation : pulse 1s infinite 1s, hideme 15s;}
#keyframes pulse {0%{transform: scale(0,0);opacity: 0.5} 100%{transform: scale(1,1);opacity: 1.5}
#keyframes hideme {100%{display: none}}
</style>
But looks like "transform: scale(0,0)" is not working in IE 11, can I use another transformation for to change the size of the circle ?
Thx in advance.
IE doesn't support CSS transforms on SVG elements. You might want to use one of the SVG libraries such as Snap etc. Or you can do it manually by manipulating the transform attribute with JS.
Related
I use the following CSS to animate the change in background color for a div:
#availability-button.red-add, #availability-button.red-remove, #availability-button.green-add, #availability-button.green-remove{
transition: background-color 2000ms linear;
}
#availability-button.red, #availability-button.red-add, #availability-button.red-add-active{
background-color: #c21807;
}
#availability-button.green, #availability-button.green-add, #availability-button.green-add-active{
background-color: #68af28;
}
The above works only one way - when you transition from green to red.
What is causing this?
Fiddle
You only need #availability-button.red and #availability-button.green. The animation life-cycle classes like red-add and red-remove are useful if you're using animations, but for transitions can be tricky since you're just transitioning the change in properties between selectors.
In this case, it seems like multiple selectors are matched in the red-* and green-* groups, which causes undefined behavior in how the transition is completed.
Updated Fiddle
I'm trying to use CSS to spin an SVG path and I can't get it working properly in Firefox.
Here are my styles:
path {
transform-origin: 50% 50%;
animation: spin 1s linear 0s infinite;
}
This works in Chrome but not Firefox. In Firefox, the animation works but the origin is relative to the SVG viewbox, not the path itself. I've learned that this is apparently correct, but why? Why do SVG paths behave differently than every other HTML element? It just seems counter intuitive.
The only alternative solution I've found is calculating the actual origin using the width and height of the viewbox and the width, height, x,and y coordinates of the path, and then using a fixed pixel value. While this works, it isn't nearly as convenient or practical as the Chrome solution. In fact, my path doesn't even have x or y attributes. It's position is described in the d attribute, so using this particular path, I'm not even sure how to make that calculation.
Is there a way to force Firefox to define the origin relative to the path, rather than the SVG? Perhaps a polyfill or something? I'd really like to accomplish this using the simple method that Chrome supports.
Why do SVG paths behave differently than every other HTML element?
Two reasons:
SVG elements are not HTML elements, and are not subject to the same rules.
The defined behaviour is consistent with the way percentage coordinates work elsewhere in SVGs.
A new property called transform-box has been proposed that will allow you to alter the behaviour of transform-origin for both HTML and SVG.
If and when browsers support this new property, you will be able to get behaviour that matches Chrome's current behaviour by using:
transform-box: fill;
FF has already implemented this, but it is not enabled by default yet (AFAIK).
For now, you will need to calculate the centre coordinates yourself. Or, alternatively, rearrange your SVG so that the path is centred on the origin and use a combination of transforms to do your rotation.
For example:
.mypath {
fill: red;
animation: spin 1s linear 0s infinite;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
<svg width="400px" height="400px">
<g transform="translate(200,200)">
<!-- path centred on (0,0) -->
<path d="M -100,-100 L 100,-100 100,100 -100,100 Z" class="mypath"/>
</g>
</svg>
In CSS transition shorthand is essential transition-delay? I would like to know if is possible to use shorthand without transition-delay...
Because i have a module on my website that minimize ces and i read that minification delete units to transition delay, and if is without unit transition doesn't work with firefox (for me also with chrome).. So:
So can i write in this way:
transition: font-size 2s ease-out; //without 0s of transition delay
Is possible ???
Thanks a lot and sorry for my english :)
I'm trying to get an compass sass animation running with endless rotation. Thats working but at the end of each rotation the item seems to slow down a little bit (like easing) but there's no easing set by myself and in documentation any value is set to false. What could be the reason for tht problem?
This is my animation made with compass animate:
#include keyframes(rotation) {
0% {
#include transform(rotate(0deg));
}
100% {
#include transform(rotate(359deg));
}
}
The animation-timing-function CSS property is set to ease by default. To override this and make your animation smooth you'll need to set this property to linear where you're calling the animation:
animation-timing-function: linear;
Is there a way to target a specific CSS Transform property (such as Rotate(), Scale(), TranslateX()) with the Transition property? Something along the lines of:
transition: 200ms transform-Rotate, 500ms transform-TranslateX;
No. The CSS transition spec states that only single CSS properties can be used in the transition-property field. transform is a CSS property. Rotate(), Scale(), etc, are transform functions, not CSS properties.