I am making keyframe animation in CSS. The animation seems to be working very well in Chrome as the -webkit syntaxes are supported.
#-webkit-keyframes title_toggle
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}
I tried the code below for Firefox, but its not working
#-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}
Please let me know I would this work in FF.
This is the CSS part.
#-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}
.title{
width:40%;
height: 30%;
position: absolute;
top: 10%;
left: 5%;
background-size: 100% 100%;
background-repeat:no-repeat;
-webkit-animation-name: title_toggle;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
background-size: 100% 100%;
-moz-animation-name: title_toggle;
-moz-animation-duration:5s;
-moz-animation-iteration-count:infinite;
}
And this is the HTML
<div class="title"></div>
If you're asking about the lack of cross-fade interpolation between different images, that's a very new addition to the spec that's not widely supported yet.
This is not working because Firefox does not support animations on background images. Background-image is not animatable. Chrome has its own implementation but you won't get it working Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Related
I was wondering if someone can help me troubleshoot an issue I'm having on a Squarespace site I'm currently building. I'm currently using a Fluid Engine section with a background video and placing some custom code in a container for an animation (See here: https://grapefruit-ellipse-2jhy.squarespace.com - Password: Lovetheone2023).
The problem I'm having is that this works fine in Safari, but just doesn't seem to be working in Chrome. However, when testing the code in isolation on Codepen using Chrome, the animation works as expected, so something about the combination of Squarespace and the code seems to be creating an issue which I can't figure out.
Any help would be greatly appreciated! For reference please see the custom code below
<style>
.animated-alternating-heading .h1 {
position: absolute !important;
display: inline-block !important;
text-align: center;
width: inherit;
animation-name: alternate !important;
animation-duration: 20s !important;
animation-iteration-count: infinite !important;
opacity: 0 !important;
}
.blue {
color: #31C0D2 !important;
}
.magenta {
color: #E2144E !important;
}
.peach {
color: #F39B40 !important;
}
#keyframes alternate {
0% {
opacity: 0;
transform: translateY(30px);
}
8%,
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(-15px);
}
}
.animated-alternating-heading .h1:nth-child(1) {
animation-delay: 0s;
}
.animated-alternating-heading .h1:nth-child(2) {
animation-delay: 5s;
}
.animated-alternating-heading .h1:nth-child(3) {
animation-delay: 10s;
}
.animated-alternating-heading .h1:nth-child(4) {
animation-delay: 15s;
}
</style>
<div class="animated-alternating-heading">
<h1 class="h1">We believe all children have a right to <span class="magenta">survive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="blue">thrive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="peach">flourish</span></h1>
<h1 class="h1">Making a Difference One Child at a Time</h1>
</div>
I was playing around with styling the scrollbar and wanted to add some animations to it(HTML and CSS only). I tried this code but it's not working. Any ideas?
body::-webkit-scrollbar-thumb {
background: #196bd7;
border-radius: 10px;
animation: scrollbar1 5s infinite;
}
#keyframes scrollbar1 {
0%{ background: blue; }
25%{ background: red; }
100%{ background: chartreuse; }
}
You can't use keyframes or transitions on scrollbar
Although you can achieve it by some tricky css stylings, for more information check this out
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've followed a short tutorial to create a bouncing arrow however the code I've used it pretty much the same excluding small differences.
However, when I add it to my hero unit, it doesn't play my animation.
It could be the transform or keyframe mixins I used...
Here is the JSFiddle: http://jsfiddle.net/x9hxfusa/
Place the keyframes & mixins declarations at the top. You have to declare them before calling them.
See Demo
I tweaked and simplified your code, I think you can arrange the animation itself to be smoother, up to your liking. Remember to add cross browser support or at least use SCSS to manage it: jsFiddle
CSS
body { background-color: black; }
.arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% { bottom:0; }
}
I also think the key issue is with the mixins, however I stirred away from it to find a simpler solution for you.
Edit: I tried doing the following initially but I missed refreshing my jsFiddle and missed the obvious solution, which is now highlighted by #Oriol. Anyways, the issue is that your keyframe & mixin code is being positioned after the animation code (or at the top of your CSS for simplicity's sake). If you wish to keep your code as is just do that, or you can try my simplified solution.
You must declare
#mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#-ms-keyframes $animation-name {
#content;
}
#-o-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
#mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
before include keyframes and transform. You must also set the bounce class in a different way (remove ''):
.bounce {
#include animation(bounce 2s infinite);
}
http://jsfiddle.net/uth333cg/
i want so zoom a picture. Webkit works fine, but Firefox is not working. Did i misspell something? I can't find anything...
<!DOCTYPE html>
<html>
<head>
<title>Zoom Hover</title>
<style type="text/css">
#-moz-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
#-webkit-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
img {
width:200px;
height:auto;
}
img:hover {
-moz-animation-name: 'zoom' 2s;
}
img:hover {
-webkit-animation: 'zoom' 2s;
}
</style>
</head>
<body>
<img src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>
</body>
</html>
A demo you'll find here: http://jsfiddle.net/pDERw/
-moz-animation -name is your problem but do not use -moz-animation for such a simple animation.
img {
width:200px;
height:200px;
-moz-transition-duration: 2s; /* firefox */
-webkit-transition-duration: 2s; /* chrome, safari */
-o-transition-duration: 2s; /* opera */
-ms-transition-duration: 2s; /* ie 9 */
}
img:hover {
width: 1000px;
height: 1000px;
}
Example
Mozilla doesn't support CSS3 animations before version 5.0. I found it:
You use -moz-animation-name: 'zoom' 2s;. You should use animation's shorthand property:
`-moz-animation: 'zoom' 2s;'
Also you shouldn't enclose animation name in ' marks. See the update here, and please use Firefox version 5+.
Put all your hover code in one css tag, maybe it's overwriting your previous css rules.