I would use Modernizr to detect when css animations are not supported. With Modernizr, it’s as simple as: if(!Modernizr.cssanimations) { //jQuery fallback } As for rotating with jQuery I would use: http://jqueryrotate.com/
Fix delay solution: Put cubic-bezier(0, 1, 0, 1) transition function for element. scss .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); &.full { max-height: 1000px; transition: max-height 1s ease-in-out; } } css .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .text.full { max-height: 1000px; … Read more
Use transform-origin and transform-box $(“.example”).on(“click”, function(e){ $(e.target).toggleClass(“reverse”); }) .reverse{ transform: scaleX(-1); transform-origin: center; transform-box: fill-box; } <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <div style=”width: 700px;height: 700px;margin-left: 100px”> <svg viewBox=”-200 0 700 700″> <image class=”example” href=”https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg” width=”150px” height=”150px” x=”50″, y=”50″/> <image class=”example” href=”https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg” width=”150px” height=”100px” x=”100″, y=”0″/> <!–x value can be changed during time–> </svg> </div>
SMIL support was not removed from Chrome but was replaced with a Polyfill. Eric Willigers has created a SMIL polyfill implemented entirely on the Web Animations API. You can find it here: https://github.com/ericwilligers/svg-animation
To use CSS3 Animation you must also define the actual animation keyframes (which you named spin) Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated … Read more
Use transform combined with left or right to avoid adding any fixed value: @keyframes destraSinistra { 0% { left: 0; } 100% { left: 100%; transform:translateX(-100%); } } #div1 { position: absolute; border: solid 1px lightgray; width: 100px; height: 30px; background-color: lightgreen; animation: destraSinistra 1s linear infinite alternate } <div id=”div1″></div>
Please try this code: #gradient { height:300px; width:300px; border:1px solid black; font-size:30px; background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); background-size: 200% 200%; -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} … Read more
You can use -webkit-animation-fill-mode to persist the end state (or even extend the start state backwards). It was added to WebKit a while ago, and shipped in iOS 4 and Safari 5. -webkit-animation-fill-mode: forwards;
transform-origin with percentage units works from Firefox 43 onwards.
As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying … Read more