I spent full-day to solve this issue, however, I couldn't fix this yet.
I tried to animate opacity from 0 to 1 by webkit animation for ios. however it doesn't work, and the element I applied the animation does not appear. I don't have the same issue with other devices. thank you for your help in advance.
these are solutions I tried.
set visibility:visible to web-kitKeyframes
change "from - to" to"0% to 100%" of web-kitKeyframes
.hello {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 5em;
/* for iOS's opacity issue */
color: white;
opacity:0;
-webkit-opacity: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #f75998;
animation:fadein 0.5s 0.8s forwards;
-webkit-animation: fadein 0.5s 0.8s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s 0.8s forwards; /* Firefox < 16 */
-ms-animation: fadein 0.5s 0.8s forwards; /* Internet Explorer */
-o-animation: fadein 0.5s 0.8s forwards; /* Opera < 12.1 */
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
appear the element by following the animation setting.
-webkit-opacity has its fallback a plain opacity. Try modeling that with your keyframe by writing:
#keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
In your animation you animate the opacity property, and don't the -webkit-opacity property. However you can try to remove all -webkit- prefixes and look in a webkit browser if it works.
Related
I'm using the sassc-rails gem to compile my sass files. After upgrading from 2.x to 3.x I'm getting the following errors:
Failure/Error: #{$odometer-themes-selector}
ActionView::Template::Error:
Error: Invalid CSS after ",": expected selector, was ", .odometer.odomete"
on line 11:1 of lib/assets/stylesheets/odometer-themes.sass
from line 14:9 of app/assets/stylesheets/cars/show.sass
>>
^
The content of the lib/assets/stylesheets/odometer-themes.sass file looks like:
// Define the theme names beforehand in the $odometer-themes variable
$odometer-themes: () !default
$odometer-themes: append($odometer-themes, odometer-auto-theme)
// Default themes
$odometer-themes-selector: ()
#each $theme in $odometer-themes
$odometer-themes-selector: $odometer-themes-selector, unquote('.odometer.#{$theme}')
#{$odometer-themes-selector}
display: inline-block
position: relative
.odometer-digit
display: inline-block
position: relative
.odometer-digit-spacer
display: inline-block
visibility: hidden
.odometer-digit-inner
text-align: left
display: block
position: absolute
top: 0
left: 0
right: 0
bottom: 0
overflow: hidden
.odometer-ribbon
display: block
.odometer-ribbon-inner
display: block
-webkit-backface-visibility: hidden
.odometer-value
display: block
-webkit-transform: translateZ(0)
&.odometer-last-value
position: absolute
&.odometer-animating-up
.odometer-ribbon-inner
-webkit-transition: -webkit-transform 2s
-moz-transition: -moz-transform 2s
-ms-transition: -ms-transform 2s
-o-transition: -o-transform 2s
transition: transform 2s
&.odometer-animating .odometer-ribbon-inner
-webkit-transform: translateY(-100%)
-moz-transform: translateY(-100%)
-ms-transform: translateY(-100%)
-o-transform: translateY(-100%)
transform: translateY(-100%)
&.odometer-animating-down
.odometer-ribbon-inner
-webkit-transform: translateY(-100%)
-moz-transform: translateY(-100%)
-ms-transform: translateY(-100%)
-o-transform: translateY(-100%)
transform: translateY(-100%)
&.odometer-animating .odometer-ribbon-inner
-webkit-transition: -webkit-transform 2s
-moz-transition: -moz-transform 2s
-ms-transition: -ms-transform 2s
-o-transition: -o-transform 2s
transition: transform 2s
-webkit-transform: translateY(0)
-moz-transform: translateY(0)
-ms-transform: translateY(0)
-o-transform: translateY(0)
transform: translateY(0)
I fail to spot the problem
In my app, I've got a simulation of an analog readout dial, like you might find on a car dashboard or a control panel. Run the following snippet for an example of what I mean:
svg { height: 100vh; }
#dial {
fill: white;
stroke: #CCCCCC;
stroke-dasharray: 405;
transform: rotate(135deg);
transform-origin: center;
}
#pointer {
fill: #FF0000;
animation: 2s infinite alternate dialrotate;
transform-origin: bottom center;
animation-timing-function: ease-in-out;
}
#keyframes dialrotate {
from {
transform: rotate(-135deg);
}
to {
transform: rotate(135deg);
}
}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle id="dial" cx="99.5" cy="100.5" r="86"/>
<polygon id="pointer" points="100.1,25.5 98.2,100 102,100"/>
</svg>
(I'm not using SVGs in my app--I just threw the example together using an SVG because I'm primarily a web developer)
Here's how I'm animating the dial movement right now:
UIView.animate(
withDuration: 0.1,
delay: 0.0,
options: .curveEaseOut,
animations: {
self.dialPointer.transform = CGAffineTransform.init(rotationAngle: radians);
},
completion: nil
)
I want to animate the pointer's direction between the two extremes (270 degrees). But I DON'T want the pointer to rotate across the shorter 90 degree path outside the dial's bounds; i.e. this is WRONG:
svg { height: 100vh; }
#dial {
fill: white;
stroke: #CCCCCC;
stroke-dasharray: 405;
transform: rotate(135deg);
transform-origin: center;
}
#pointer {
fill: #FF0000;
animation: 2s infinite alternate dialrotate;
transform-origin: bottom center;
animation-timing-function: ease-in-out;
}
#keyframes dialrotate {
from {
transform: rotate(225deg);
}
to {
transform: rotate(135deg);
}
}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle id="dial" cx="99.5" cy="100.5" r="86"/>
<polygon id="pointer" points="100.1,25.5 98.2,100 102,100"/>
</svg>
How can I force the UIView's rotation to rotate the long way around, instead of rotating over the shortest direction?
As you have discovered, by default UIView animation takes the shortest path when interpolating angle values. You have a couple of options:
You can decompose the animation into several shorter steps, or keyframe it.
You can use a CABasicAnimation instead and animate your layer's transform using a cumulative animation
Playground example:
import PlaygroundSupport
import UIKit
let rect = CGRect(x: 0, y: 0, width: 300, height: 300)
let view = UIView(frame: rect)
let bar = UIView(frame: rect.insetBy(dx: 40, dy: 140))
bar.backgroundColor = .red
view.addSubview(bar)
let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.toValue = 1.25 * CGFloat.pi
animation.isCumulative = true
animation.duration = 5
bar.layer.add(animation, forKey: "spin")
bar.layer.transform = CATransform3DMakeRotation(1.25 * CGFloat.pi, 0, 0, 1)
PlaygroundPage.current.liveView = view
You can do it like this
UIView.animate(
withDuration: 0.1,
delay: 0.0,
options: .curveEaseOut,
animations: {
if radians > CGFloat.pi {
self.dialPointer.transform = CGAffineTransform.init(rotationAngle: CGFloat.pi);
}
self.dialPointer.transform = CGAffineTransform.init(rotationAngle: radians);
},
completion: nil
)
I'm developing a mobile app with Cordova Phonegap that uses gradients that stack on top of eachother. On Android everything works as it is supposed to but on iOS the gradients shows up different. The edges are green whereas when I preview it in my browser it is blue as it's supposed to be. There's also this weird transition at the bottom of the page.
This is my css:
#gradient2Layer1 {
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
color = "blue";
background: -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, #b3c6ff 50%,rgb(128,128,128) 100%);
z-index: 100; }
#gradient2Layer2 {
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
opacity: 0.5;
color = "blue";
background: -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, blue 50%, blue 100%);
animation: fadeIn 5s infinite alternate;
z-index: 100; }
How can I fix this?
I really believe this is a typo and you wanted to use rgba(15,43,128,0) (which is the shade of blue you're looking for) instead of rgba(15,431,28,0), which is not even a valid RGB value (limited to 0..255).
Having border-radius issues on iPad(3.2), iPad 2 (4.3.2).
Here's the code:
.articles .post .left img{
width:100%;
border-radius: 0 0 100% 0;
-moz-border-radius: 0 0 100% 0;
-khtml-border-radius: 0 0 100% 0;
-webkit-transition: border-radius 1s;
transition-delay: 0.1s;
transition-duration: 0.5s;
transition-property: all;
transition-timing-function: ease;
}
And this is the result I'm getting:
Any ideas on how to get the desired result I'm after?
On iOS 4, use border-radius css on the container of img and set over-flow:hidden.
the container will 'cut' the img into rounded cornor.
its a tweak.
Try adding
-webkit-border-radius: 0 0 100% 0;
As Safari on IOS5 needs that to render border radius.
Is it possible to have the two divs with box-shadow overlap with fully transparent edges? In my example, I want to keep the faded, kind of rounded edge, but it's important that the underlying box is visible through the fade. But as you can see the faded edge is not entirely transparent so it will show a white border rather than let the blue color shine through..
Is it possible to make this work without resorting to png or similar?
Example
.bg {
background-image: -moz-linear-gradient(right top , rgba(255, 255, 255, 0) 0%, #FF0000 100%);
box-shadow: 0 0 90px 90px rgba(255, 255, 255, 0) inset;
-webkit-box-shadow: 0 0 90px 90px rgba(255, 255, 255, 0) inset;
-moz-box-shadow: 0 0 90px 90px rgba(255, 255, 255, 0) inset;
opacity: 0.7;
position: absolute;
}
I don't know whether this is possible with inset box-shadow; however you can make them overlap seamlessly with outset box-shadow for the overlapping element.
All you have to do is give the overlapping element a box-shadow color that is the same as its background-color.
I have edited your sample here: (I didn't copy all the vendor-specific prefixes, just used box-shadow).
http://jsbin.com/orajot/4/edit