I have created following glow effect for my image controls but it is not working on IE. How can i make it run on IE9? or any alternative?
#-webkit-keyframes redPulse {
from { background-color: #FF5959; -webkit-box-shadow: 0 0 40px #FF5959; }
50% { background-color: #FD9FA2; -webkit-box-shadow: 0 0 40px #FD9FA2; }
to { background-color: #FF5959; -webkit-box-shadow: 0 0 40px #FF5959; }
}
.red{
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
width:200px;
padding-top:0px;
margin-top:0px;
}
It's still not suported
Internet Explorer does not yet support the #keyframes rule or the
animation property.
Firefox requires the prefix -moz-, Chrome and Safari require the
prefix -webkit-, and Opera require the prefix -o-.
From: http://www.w3schools.com/css3/css3_animations.asp
upd
maybe it's can help in your case with some jquery
http://placenamehere.com/article/384/css3boxshadowininternetexplorerblurshadow/
Related
I fire css animation of font-icon by adding it a class. The animation scaling icon from 1 to 30, and change color from #000 to #ff0000.
While it works fine in mozilla, it will make icon scales like if it was low quality png image in chrome, opera and safari. Can't check ie.
It can be fixed in chrome and opera by isolating color animation in ::before pseudoelement.
But in safari even just scale animation alone treats font-icon like png image.
As animation is finished, icon recover its font nature, and pixelation disappears.
Examples:
works only in mozilla http://codepen.io/g1un/pen/Kgrpjq
works in mozilla, chrome, opera http://codepen.io/g1un/pen/BLzoWp
Code, that works properly only in mozilla:
<div>
<h1></h1>
</div>
div {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
h1 {
position: relative;
font-size: 34px;
cursor: pointer;
}
h1::before {
content: 'A';
}
h1.anima {
animation: anima;
-webkit-animation: anima;
animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes anima {
0% {
transform: scale(1);
color: #000;
}
100% {
transform: scale(30);
color: #ff0000;
}
}
#keyframes anima {
0% {
transform: scale(1);
color: #000;
}
100% {
transform: scale(30);
color: #ff0000;
}
}
$('h1').on('click', function(){
$(this).addClass('anima');
var _this = $(this);
setTimeout(function(){
_this.removeClass('anima');
}, 5000);
});
CSS changes, that helps chrome and opera:
h1.anima::before {
animation: anima-before;
-webkit-animation: anima-before;
animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes anima {
0% {
transform: scale(1);
}
100% {
transform: scale(30);
}
}
#keyframes anima {
0% {
transform: scale(1);
}
100% {
transform: scale(30);
}
}
#keyframes anima-before {
0% {
color: #000;
}
100% {
color: #ff0000;
}
}
#-webkit-keyframes anima-before {
0% {
color: #000;
}
100% {
color: #ff0000;
}
}
Does anyone know better way to make chrome and opera animates properly without pseudoelement hack? And who knows what's wrong with safari, and how pixelated scaling can be fixing in it?
UPDATE:
As #ZBerg has mentioned in his comment: "font smoothing options have a wide array support varients. If something has affected your desktop profile it may have a knock on effect (google - smooth edges of screen fonts)".
Taking into account, that I haven't no more problems with chrome (but really had it as you can see via screenshot, linked in comment), something has really affected my desktop (but I can't google smth exactly about smoothing issue while scaling).
On the whole, I guess that the full answer to my question must include:
the decision for safari (or explanation what's wrong with it);
(optionally) explanation of what was wrong with chrome.
Under explanation I mean link to the issue report or regarding chrome the way to reproduce the error.
One solution that works for me is scale the parent, 'div' in this case and made the scale over him.
CSS
div.anima {
animation: anima;
-webkit-animation: anima;
animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
JS:
$('div').on('click', function(){
as follows:
updated
I have been having trouble making my site work across all major browsers, and I have become stuck once again. My keyframes animation does not run in Firefox, and I cannot work out why. It works perfectly in Chrome.
.runner {
border-radius: 40pt;
-webkit-box-shadow: 0 0 10pt grey;
-moz-box-shadow: 0 0 10pt grey;
box-shadow: 0 0 10pt grey;
width:494px;
height: 415.8px;
position: absolute;
top: 0;
left: 0;
background: url(pic1.png);
-webkit-animation: slideshow 20s infinite 2s;
-moz-animation: slideshow 20s infinite 2s;
animation: slideshow 20s infinite 2s;
}
#keyframes slideshow {
20% { background: url(pic1.png) }
25%, 45% { background: url(pic2.png) }
50%, 70% { background: url(pic3.png) }
75%, 95% { background: url(pic4.png) }
}
#-webkit-keyframes slideshow {
20% { background: url(pic1.png) }
25%, 45% { background: url(pic2.png) }
50%, 70% { background: url(pic3.png) }
75%, 95% { background: url(pic4.png) }
}
You don't need the -moz-animation prefix anymore, but you do need to add prefixes on the keyframes(#-moz-keyframes).
First of all, I am using Firefox 28.
Below is the tutorial from W3 schools. So i believe it's worth having a look.
CSS3 Animation Property try out
One thing is that, I think tutorial has been updated and -moz- link does not seem to be there.
So, as far as compatibility is concerned, the jurassic versions of IE and Firefox 3.5 and before may produce problem.
EDIT Demo is here : http://3.cnxical.appspot.com
The text-shadow property changes on hover, and with animation-fill-mode set forwards the state persists.
The animation for the :active state does not work, and nothing happens when the title is clicked.
The expected behaviour is the title should disappear because the text-shadow property was set to (and both of these were tried) none or 0 0 1px transparent. Setting text-shadow for :active was also tried without an animation and it did not work.
How can the correct behaviour be achieved?
The code is :
#title {
position:absolute;
cursor:pointer;
text-align:center;
top:15%;
left:50%;
-webkit-transform:translate(-50%,-50%);
color:transparent;
text-shadow:0 0 10px lime;
font-size:5vmin;
font-weight:bold;
font-family:"Courier New",Courier,monospace;
-webkit-animation: push_title_focus 0.3s;
}
#title:active {
-webkit-user-select:none;
-webkit-animation: vanish_title 0.3s;
}
#title:hover {
-webkit-animation: pull_title_focus 0.3s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes pull_title_focus {
from { text-shadow: 0 0 10px lime; }
to { text-shadow: 0 0 1px lime; }
}
#-webkit-keyframes push_title_focus {
from { text-shadow: 0 0 1px lime; }
to { text-shadow: 0 0 10px lime; }
}
#-webkit-keyframes vanish_title {
from { text-shadow: 0 0 1px lime; }
to { text-shadow: none !important; }
}
When you press the mouse button down to activate the link, the mouse is still pointing to it, so it is still being hovered.
#title:hover and #title:active are equally specific, and the hover rule is defined last.
Any rules with properties that are specified in both rule-sets, will be overridden by the :hover rule (including -webkit-animation).
Reorder your rulesets so the :hover rule appears before the :active rule.
I have this css code for an select tag
.sele {
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
opacity: 0.75;
margin: 0 10px 5px 0;
}
.sele:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
It is working well on Mozilla Firefox but has no effect on chrome or Internet explorer
First of all i would advice you to have a look into this
That's weird... i have tested your code on 5 browsers ( Chrome, Mozilla , Safari , Opera , IE ) and only IE had a problem with the transform which you can solve it by adding the code below:
transform: scale(2,4);
Check the fiddle here
Edit: I don't think you can use this directly on a select option, but you have wrap the select tag within a div and apply that to the div.
Example
I'd like to create a element which overlays a part of a page using position: absolute. This element would be 50% opaque and blink between red and transparent. A bit like what OSX uses (used?) to do for the default button of a dialog.
How to create a infinite animation loop with CSS3?
How to cycle between two background colours in this loop?
Which browsers is possible support today through CSS3 animation?
jQuery animation is an alternative, but I'd like to try CSS3 approach first.
The first 2 questions are answered by the spec.
To loop: animation-iteration-count: infinite;
And cycling the background color involves specifying a #keyframes rule.
body { background: #0ff; }
#-webkit-keyframes blink {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
#keyframes blink {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
#animate {
height: 100px;
width: 100px;
background: rgba(255,0,0,1);
}
#animate {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: blink;
animation-timing-function: ease;
}
(don't forget any applicable vendor prefixes!)
As far as browser support goes, i couldn't tell you specifics, but in any case i would recommend feature detect via modernizr and a javascript fallback.
Here is an example that works in webkit and fulfills at least some of your requirements. NOTE: I don't use a mac so i wasn't sure the specifics of the effect you referenced.
Once you've set the animation up in the stylesheet (-webkit-transition:), you can simply change the color with JavaScript.
function toggleColor(element)
{
var red = "rgba(255,0,0,0.5)";
var transparent = "rgba(255,0,0,0)";
element.style.backgroundColor = ((element.style.backgroundColor == red) ? transparent : red);
window.setTimeout(function()
{
toggleColor(element);
});
}
Currently, only Webkit browsers (Safari & Chrome) support CSS-Animations.