I'd like to change the font-feature settings of a font that has different stylistic sets using CSS keyframes. I use different font-feature settings outside of the animation on the same webpage, which works in both Chrome and Safari. I also use CSS keyframe animations, which also works fine in Safari. However, when I try to animate the font-feature-settings, Safari lets me down.
Here is my CSS:
.animate {
animation: animateFont 2s linear infinite;
}
#keyframes animateFont {
0% {
font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
color: white;
}
50% {
font-feature-settings: "ss02" 1;
-webkit-font-feature-settings: "ss02" 1;
-moz-font-feature-settings: "ss02" 1;
-ms-font-feature-settings: "ss02" 1;
color: red;
}
100% {
font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
color: white;
}
}
I found a lot of stuff on animations generally not working in Safari but nothing specifically on font-feature-settings. Does anyone know a CSS way to get this working?
Edit: This is an example of a ligature animatio that does work in Chrome but not in Safari.
.animate-font {
animation: animateFont 2s linear infinite;
font-size: 100px;
}
#keyframes animateFont {
0% {
font-feature-settings: "smcp" 1;
-webkit-font-feature-settings: "smcp" 1;
-moz-font-feature-settings: "smcp" 1;
-ms-font-feature-settings: "smcp" 1;
}
50% {
font-feature-settings: "liga" 0;
-webkit-font-feature-settings: "liga" 0;
-moz-font-feature-settings: "liga" 0;
-ms-font-feature-settings: "liga" 0;
}
100% {
font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
}
}
<div class="animate-font">
fi
</div>
Related
I have the following HTML:
<p class="animate">X</p>
And this is my CSS:
.animate {
animation-duration: 0.75s;
animation-name: add-icon;
font-size: 8em;
}
#keyframes add-icon {
0% {
font-size: 18em;
}
25% {
font-size: 6em;
}
60% {
font-size: 13em;
}
100% {
font-size: 8em;
}
}
This is what I expect to see: (tested in Firefox, Chrome, Edge)
But this is how it actually behaves in Safari 11:
I tried to prefix my CSS with the Webkit prefixes but that doesn't change the result.
Here's a working demo of my problem.
Use rem instead of em
Actually em depends on the parent element and rem depends on the root element...so its good to use rem instead of em.
Read this article
Stack Snippet
.animate {
animation-duration: 0.75s;
animation-name: add-icon;
font-size: 8rem;
}
#keyframes add-icon {
0% {
font-size: 18rem;
}
25% {
font-size: 6rem;
}
60% {
font-size: 13rem;
}
100% {
font-size: 8rem;
}
}
<p class="animate">X</p>
Not so surprisingly scale effects look horrible in ms edge browsers. Is there a way to disable this all together for edge?
.jumbotron__bg {
-webkit-animation-name: animateBg;
animation-name: animateBg;
-ms-animation-name: none;
animation-duration: 18000ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(.3,0,.7,1);
animation-iteration-count: 1;
}
#keyframes animateBg {
from {
transform: scale(1.05, 1.05);
-ms-transform: scale(1,1);
}
to {
transform: scale(1, 1);
-ms-transform: scale(1,1);
}
}
(ie is ok, does not work for edge)
you could use #supports with a property that only Edge supports ;
this works on Edge 12 and later (all versions) :
#supports (-ms-ime-align: auto) {
.jumbotron__bg {
animation-name: none;
}
}
~or~
this only works in Edge up to v13
#supports (-ms-accelerator:true) {
.jumbotron__bg {
animation-name: none;
}
}
I am animating an SVG element, using this code:
#bubble_1_{
-webkit-animation: bubble1 10s forwards linear infinite;
}
#-webkit-keyframes bubble1{
0%{
-webkit-transform: translate(0px,0px);
}
5%{
-webkit-transform: translate(1px,10px);
}
10%{
-webkit-transform: translate(-1px,20px);
}
15%{
-webkit-transform: translate(1px,30px);
}
20%{
-webkit-transform: translate(-1px, 40px);
}
25%{
-webkit-transform: translate(10px,45px);
}
30%{
-webkit-transform: translate(20px,50px);
}
35%{
-webkit-transform: translate(30px,49px);
}
40%{
-webkit-transform: translate(40px, 51px);
}
45%{
-webkit-transform: translate(50px,48px);
}
50%{
-webkit-transform: translate(60px,51px);
}
55%{
-webkit-transform: translate(70px,49px);
}
60%{
-webkit-transform: translate(80px, 51px);
}
65%{
-webkit-transform: translate(90px,48px);
}
70%{
-webkit-transform: translate(100px,51px);
}
75%{
-webkit-transform: translate(110px,49px);
}
80%{
-webkit-transform: translate(120px, 51px);
}
85%{
-webkit-transform: translate(130px,71px);
}
90%{
-webkit-transform: translate(131px,100px);
}
95%{
-webkit-transform: translate(129px,120px);
}
100%{
-webkit-transform: translate(131, 140px);
}
}
But, when it comes to an end, I can see it going back to it's initial position. That is strange, because transition between 100% and 0% should occur instantly, right? I need that kind of behavior, I don't want it to be seen going back.
Does anyone know what I should do? I tried with 'forwards' and 'backwards', it doesn't work.
It looks like you are just missing px on your 131, 140px setting at 100% keyframe, that should then make it instantly jump back to its starting position once finished (which I think is what you want).
If you need it to stop after one play then you need to add -webkit-animation-iteration-count: 1; and remove the infinte off your animation.
The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.
you have to use -webkit-animation-fill-mode: forwards; to do this effect like so :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: mymove 3s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
this is an example LINK
-webkit-animation-iteration-count: 1; // you will need this to set the iteration at 1
I am using this code to fade-in images when the page loads. Works fine in all browsers I have tested except from IE on Windows.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-duration:1.5s;}
.fade-in.one {-webkit-animation-delay: 0.3s;-moz-animation-delay: 0.3s;animation-delay: 0.3s;}
.fade-in.two {-webkit-animation-delay: 0.6s;-moz-animation-delay:0.6s;animation-delay: 0.6s;}
.fade-in.three {-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;animation-delay: 0.9s;}
any ideas?
You are using this method and it has a warning for IE:
Warning! This CSS3 code will only work on Firefox, Chrome, Safari and
maybe newer versions of IE (after version 9)
Since IE9 doesn’t support css3 animations but does support opacity: 0;
property you will have to have ie9 load a separate ie9 css where you
have all your fade classes set to opacity: 1
If you are looking for alternative:
Method 1:
If you are looking for a self-invoking transition then you should use CSS3 Animations, they aren't supported as well but this is exactly the kind of thing they were made for.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Demo
http://jsfiddle.net/SO_AMK/VV2ek/
Browser Support
All modern browsers, IE 10+: http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JS, see third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
Plain JS (not in demo)
document.getElementById("test").children[0].className += " load";
Demo
http://jsfiddle.net/SO_AMK/a9dnW/
Browser Support
All modern browsers, IE 10+: http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
http://jsfiddle.net/SO_AMK/a9dnW/3/
Browser Support
jQuery 1.x: All modern browsers, IE 6+: http://jquery.com/browser-support/
jQuery 2.x: All modern browsers, IE 9+: http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS3 transitions or animations.
Source
Try to add the prefix -ms- like -ms-animation-delay.
Because you have just specify the prefix -moz- for mozilla and -webkit- for chrome.
I have created an animation for SVG using css3 which is working perfectly in Chrome and Firefox. It is partially working in Safari but not working in Internet Explorer (IE9+ which support css animations)
See Demo
CSS:
#-webkit-keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
#-ms-keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
#-moz-keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
#keyframes dash {
70%,80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
85% {
fill-opacity: 0;
stroke-opacity: 1;
}
95% {
stroke: #17739D;
stroke-dashoffset: -301;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-dashoffset: -301;
}
}
#Layer_1 {
margin-left: auto;
margin-right : auto;
top: 50%;
position: absolute;
left: 50%;
margin-left: -65px;
margin-top: -35px;
}
svg {
background: #fff;
display: block;
}
svg * {
stroke: #666;
#stroke: #17739D;
stroke-width: 1;
fill-opacity: 0;
stroke-dasharray: 350;
stroke-dashoffset: 440;
}
svg #bp_svg * {
-webkit-animation-name : dash;
-moz-animation-name : dash;
-ms-animation-name : dash;
animation-name : dash;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function : linear;
-moz-animation-timing-function : linear;
-ms-animation-timing-function : linear;
animation-timing-function : linear;
-webkit-animation-fill-mode : forwards;
-moz-animation-fill-mode : forwards;
-ms-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
Can anyone help me to sort out what to do to make it work properly in Safari and IE also?
While CSS3 animations are supported in IE9, SVG animations are not even supported in IE11 and it's hard to tell whether they will ever be. You probably have to either rely on animated HTML elements or use JavaScript which will not benefit from the hardware acceleration used to render CSS animations but still might be a viable solution.
Another idea would be to prerender it and deploy it as a gif, either every time or only in IE.
Source: http://caniuse.com/#feat=svg-smil
CSS3 animations are not supported in IE9, which explains why it doesn't work in IE9. The same will apply for Safari,it may help to also give the versions of each browser. Please refer to this list of supported features: http://caniuse.com/css-animation
I would suggest using raphaeljs javascript library. It has great capability in animating svg.
Raphael currently supports Chrome 5.0+ Firefox 3.0+, Safari 3.0+,
Opera 9.5+ and Internet Explorer 6.0+
http://raphaeljs.com/
http://raphaeljs.com/playground.html - quick preview.