The following style is just an example of how to set transitions in CSS3. Is there a pure CSS trick to make this play in loop?
div {
width:100px;
height:100px;
background:red;
transition:width 0.1s;
-webkit-transition:width 0.1s; /* Safari and Chrome */
-moz-transition:width 0.1s; /* Firefox 4 */
-o-transition:width 0.1s; /* Opera */
transition:width 0.1s; /* Opera */
}
div:hover {
width:300px;
}
CSS transitions only animate from one set of styles to another; what you're looking for is CSS animations.
You need to define the animation keyframes and apply it to the element:
#keyframes changewidth {
from {
width: 100px;
}
to {
width: 300px;
}
}
div {
animation-duration: 0.1s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Check out the link above to figure out how to customize it to your liking, and you'll have to add browser prefixes.
If you want to take advantage of the 60FPS smoothness that the "transform" property offers, you can combine the two:
#keyframes changewidth {
from {
transform: scaleX(1);
}
to {
transform: scaleX(2);
}
}
div {
animation-duration: 0.1s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
More explanation on why transform offers smoother transitions here:
https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
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 built a preloading screen for a website with a loading bar that is animated with CSS #keyframes. Works fine on Chrome and Firefox, but on macOS Safari it gets very discrete. Here is a video demo of how it looks on Safari: https://www.youtube.com/watch?v=ODV5lN2xZSI&feature=youtu.be
As you can see, loading bar background (gray line) and the bar itself (black line) twitch instead of going smoothly from 0% width to 100%. What could be a problem, is this known bug of Safari? Latest macOS and Safari.
#keyframes loading-wrapper-anim {
0% {
width:0%;
}
100% {
width:100%;
}
}
.preloader .loading_wrapper {
position:absolute;
width:0%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start; /*this one is because of the parent element*/
}
.preloader .loading_wrapper .loading_bar {
height:100%;
width:0%;
height:100%;
background:#000;
animation: loading-wrapper-anim 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
<div class="preloader">
<div class="loading_wrapper">
<div class="loading_bar">
</div>
</div>
</div>
Smooth animation is expected.
Thank you.
You can attempt to force the hardware acceleration by adding a translateZ on the animation.
.preloader .loading_wrapper {
position:absolute;
width:0%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start;
/* Add this */
-webkit-transform: translateZ(0);
}
JSFiddle
Alternatively, you can look into using the will-change method as a last resort for smoother animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
The way I fixed it is instead of trying to manipulate width of an element (which causes redrawing each time the width changes), did the following:
#keyframes loading-wrapper-anim {
0% {
transform:scaleX(0);
}
100% {
transform:scaleX(1);
}
}
.preloader .loading_wrapper {
position:absolute;
width:100%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start; /*this one is because of the parent element*/
transform:scaleX(0);
transform-origin:0% 0%;
}
.preloader .loading_wrapper .loading_bar {
height:100%;
width:100%;
height:100%;
background:#000;
animation: loading-wrapper-anim 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
transform:scaleX(0);
transform-origin:0% 0%;
}
I used transform:scaleX() in conjunction with transform-origin:0% 0% (this one sets center of transformation to the top left corner) to emulate width change without actually changing it.
Conclusion: use transform where/when possible. They are more efficient in terms of CSS animations and transitions.
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
This is my first try with css3 animation. I'm trying to create a letter spacing animation in which the letters are closely spaced at first and then letter spacing increases. So far I've found a code which allows the spacing to happen on hover. How can I remove the hover and make the animation when the page opens.
Heres the fiddle http://jsfiddle.net/Lventbau/
and the code
p {
letter-spacing:-2px;
-webkit-transition: letter-spacing, 1s;
-moz-transition: letter-spacing, 1s;
-o-transition: letter-spacing, 1s;
transition: letter-spacing, 1s;
}
p:hover {letter-spacing:2px;}
You can accomplish it with css3 animations jsfiddle :
p {
letter-spacing:2px;
-webkit-animation: myanim 1s;
animation: myanim 1s;
}
#-webkit-keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
#keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
You can find animation documentation here
Can somebody tell me why blink effect is not working chrome browser
<p class="blink">at least it's not Comic Sans</p>
<style>
.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#keyframes blink {
80% {
visibility: hidden;
}
}
</style>
And also I require this to work on every iOS and Android devices. Please suggest.
You are missing -webkit prefixes for animation and keyframes.
First of all, for reference, please do try out this:Tryit from W3School
Especially in chrome, things such as animation, transformation requires -webkit prefix. After reading my reference, you should be able to do it yourself.
But here is the solution anyway. See result here: JSFiddle
.blink {
-webkit-animation-duration: 1s;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(2, start);
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#-webkit-keyframes blink {
80% {
visibility: hidden;
}
}
#keyframes blink {
80% {
visibility: hidden;
}
}
You now can go on and read more about prefix (simply search about it google)