Transitions are not supported yet on webkit gradients. It’s in the spec, but it doesn’t work yet. (p.s. if you’re doing color transitions only – you may want to check out -webkit-filters – which do animate!) Update: gradient transitions apparently do work in IE10+
Here is possible approach (based on AnimatableModifier). Actually it demonstrates how current animation end can be detected, and performed something – in this case, for your scaling scenario, just initiate reversing. Simplified & modified your example struct TestReversingScaleAnimation: View { @State var scaleImage : CGFloat = 1 var body: some View { VStack { Button(“Start … Read more
Here’s a scss way to do it using a for loop. @for $i from 1 through 10 { .myClass img:nth-child(#{$i}n) { animation-delay: #{$i * 0.5}s; } }
I’m afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes. $(“.box”).bind(“webkitAnimationEnd mozAnimationEnd animationend”, function(){ $(this).removeClass(“animated”) }) $(“.box”).hover(function(){ $(this).addClass(“animated”); }) http://jsfiddle.net/u7vXT/
Transition properties are comma delimited in all browsers that support transitions: .nav a { transition: color .2s, text-shadow .2s; } ease is the default timing function, so you don’t have to specify it. If you really want linear, you will need to specify it: transition: color .2s linear, text-shadow .2s linear; This starts to get … Read more