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.
Related
I have a list of divs with a background color determined by a knockout.js observable. The background color of the first div should pulse slightly to make clear, that this is the active element. I created a pulse animation with css and keyframes, but this seems to only work with a fixed color known at "compile time". Can I somehow make that more dynamic? I already tried to use the inherit keyword, but that doesn't work
<div class="cch-current-storage" data-bind="style: { 'background-color': storageType.color }">Bla</div>
<div data-bind="style: { 'background-color': storageType.color }">Next</div>
<style>
.cch-current-storage {
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction:alternate-reverse;
animation-timing-function:ease
}
##keyframes color {
from {background-color: red;}
to {background-color: inherit;}
}
</style>
First of all there is a typo... css-current-storage vs .ccs-current-storage
I made fiddle you can look here (https://jsfiddle.net/z9modqt4/)
css
div{
width: 100px;
height: 100px;
}
.css-current-storage {
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease;
}
#keyframes color {
to {
background-color: blue;
}
}
html
<div class="css-current-storage" style='background-color: yellow' >Bla</div>
it seems to work if I left empty space in from (delete from completly)
Its counter intuitive because that way it works from to to from. So it works in other direction (because of animation-direction: alternate-reverse like Temani said in comment)
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'm a bit of a newbie to CSS3 animations, but I've looked everywhere, and I can't find a solution to this problem. I have a JSP page that I want the background to slowly fade from green to blue, and then slowly fade the opposite way and repeat this process infinitely.
I currently have it go from green to blue smoothly, but then it jerks back to blue instantly. Is there a way to play two animations from green to blue, then blue to green and repeat infinitely?
Here's the CSS code I have now:
#keyframes changeColorGreenToBlue {
from { background-color: rgb(146,213,142);}
to {background-color: rgb(133,184,222);}
}
#keyframes changeColorBlueToGreen {
from {background-color: rgb(133,184,222);}
to { background-color: rgb(146,213,142);}
}
.jumbotron {
height: 100%;
width: 100%;
background-color: green;
animation: changeColorGreenToBlue ease;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: changeColorBlueToGreen;
animation-iteration-count: infinite;
animation-duration: 4s;
background-size: cover;
background-repeat: repeat-y;
margin-bottom:1px;
}
It's a little messy because I was just trying everything to get it working. Sorry about that!
Rather than two keyframe animations, you want one that changes the background color twice (once at 50%, and back at 100%), like this:
#keyframes changeColor {
0% {
background-color: rgb(146,213,142);
}
50% {
background-color: rgb(133,184,222);
}
100% {
background-color: rgb(146,213,142);
}
}
See my codepen for example in action.
I need to deal with language like Myanmar, its characters are very much larger compare to other language like English. since then its line-height calculated by browser is even more large, that parts of the caret is out of the div border.
So I need a way to cause the caret to hold to its height unchanged from language to language. like you have Myanmar and English in same line, and the caret will hold on to 50px while moving from the left to the right. Or you can say that I'm trying to find a way to disable the browser's default behavior of calculating the height of the caret.
by the way, this only deal with opera presto, it's well performed on chrome or webkit.
I do not think I get the final perfect solution, but it's really a way to solve this problem somehow.
I use a child div with a blinking animation to simulate the browser's caret, and make the father div a pure div. here is the css code.
Here is the Github project which I think help me a lot.
https://gist.github.com/navinpai/2902229
.cursor {
width: 1px;
height: 80px;
display: block;
position: relative;
margin-left: 30px;
animation-name: see_likes;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
animation-delay: 0s;
-o-animation-name: see_likes;
-o-animation-duration: 1s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-play-state: running;
-o-animation-delay: 0s;
}
#keyframes see_likes {
0% { background: #0a0 }
47% { background: #090 }
50% { background: transparent }
97% { background: transparent }
100% { background: #090 }
}
#-o-keyframes see_likes {
0% { background: #0a0 }
47% { background: #090 }
50% { background: transparent }
97% { background: transparent }
100% { background: #090 }
}
I've added a blink animation to one of the elements from my menu-bar.
It works perfectly in Mozilla, but in Chrome it stops after being clicked and only clearing the browser data helps. Sometimes even that doesn't solve it.
Can you help? It does not work on IE either, but that is not as important.
.menu-box #menu-item-368 a {
animation-name: blink;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-name: blink;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-ms-animation-name: blink;
-ms-animation-duration: 500ms;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
}
#keyframes blink {
from {
color: white;
}
to {
color: red;
}
}
#-webkit-keyframes blink {
from {
-webkit-color: white;
}
to {
-webkit-color: red;
}
}
#-ms-keyframes blink {
from {
-ms-color: white;
}
to {
-ms-color: red;
}
}
The link stops blinking when the link has been clicked because the browser's default :visited style is being applied and most browsers limit styling of the :visited pseudo-class.
For privacy reasons, browsers strictly limit the styles you can apply
using an element selected by this pseudo-class: only color,
background-color, border-color, border-bottom-color,
border-left-color, border-right-color, border-top-color,
outline-color, column-rule-color, fill and stroke.
To get around this you can animate the opacity of the link instead.
a {
animation: blink 500ms infinite alternate;
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1
}
}
hello world
A few side notes...
My example makes use of the short-hand animation property.
I also removed the prefixes, for brevity and because most modern browsers no longer require them.
Use blinking text sparingly and with extreme caution or don't use it at all. Many users find it irritating. The <blink> tag was depreciated for a good reason.
remove the -webkit- and -ms- prefixes from the color property
#-webkit-keyframes blink {
from {
color: white;
}
to {
color: red;
}
}
#-ms-keyframes blink {
from {
color: white;
}
to {
color: red;
}
}
to check if prefixes are needed check caniuse.com