I am trying to animate a rotating element, this works great on android but on iOS it gets stuck at a rotation of 90 degree.
I want to do the animation with CSS to keep the javascript code clean. Also javascript animations can block other javascript code i want to run.
#keyframes rotate-element {
0% {transform: rotate(0);}
25% {transform: rotate(90);}
50% {transform: rotate(180);}
75% {transform: rotate(270);}
100%{transform: rotate(360);}
}
#clock {
animation-name: rotate-element;
animation-duration: 10s;
animation-iteration-count: infinite;
}
My page looks like this
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true" backgroundSpanUnderStatusBar="true" id="main">
<StackLayout>
<Image id="clock" src="~/Images/clock.png"></Image>
</StackLayout>
</Page>
Related
Until the animation ends in the middle component, the state of the component at the top level does not change, as it should be? I can't figure out how the animation below is related to the transition above
//top level component
<template lang="pug">
.app
transition(name="some-transition")
TheComponent(v-if="isShowComponent")
</template>
// middle component PrettyBackground
<template lang="pug">
.pretty-background
slot
</template>
<style lang="stylus">
.pretty-background
animation gradient 15s ease infinite
</style>
//TheComponent
<template lang="pug">
PrettyBackground
.h1 Hello
</template>
#keyframes gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
I'm trying to make a progress bar that moves across the screen with some text below it.
Here's my template:
<StackLayout v-else id="loadingContainer">
<StackLayout class="progress-bar">
<StackLayout class="progress"></StackLayout>
</StackLayout>
<StackLayout horizontalAlignment="center">
<Label id="progressText" :text="loadingText" />
</StackLayout>
</StackLayout>
and here is the CSS:
.progress-bar {
height: 20px;
width: 100%;
position: relative;
background-color: #f8f8f8;
}
.progress {
position: relative;
height: 100%;
border-radius: 0px 2px 2px 0px;
animation-name: fill;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-direction: normal;
width: 0%;
}
#keyframes fill {
0% {
width: 0%;
background-color: #6a2d91;
}
100% {
width: 100%;
background-color: #6a2d91;
}
}
Both display the text as I expect but the progress bar behaves very differently on iOS and Android. Android just shows the progress bar as full the whole time and never animates it. iOS shows the appropriate gray background until the `animation-duration is up and then the bar just shows full, it doesn't animate it. I have keyframes working on this page doing other things but I can't get this figured out.
By default child components in a vertical StackLayout will stretch out to fill the width. You should set horizontalAlignment to left on the progress bar layout, though it gets what you wanted on Android, on iOS horizontalAlignment / verticalAlignment is not respected during animation.
So I would suggest using JavaScript APIs to animate Width / Height, presented by Alex.
You may also use the default Progress and increment the value at internals to achieve similar look.
I'm trying to design a label or button with some text inside it. I know how to give border radius and make it oval but I need an eye shape wide button or label like exactly below.
i follwed this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_oval with no results like rectangle shapes with round border button below
then,I tried the below code but only the corners are getting rounded.
.boc1 {
border-width: 1;
border-radius: 100;
padding: -2px;
margin: 10% 0 0 0;
padding: 10% 0 10% 0;
height:100%;
width:85%;
}
I hope you are clear about the problem..!
Change border-radius as border-radius:50px;
Use clip-path
XML
<GridLayout>
<StackLayout class="oval"></StackLayout>
<Label class="h2" text="Some text" color="white" verticalAlignment="center"
horizontalAlignment="center"></Label>
</GridLayout>
CSS
.oval {
width: 85%;
background-color: red;
clip-path: ellipse(50% 15% at 50% 50%);
}
I've got a button and I would like it to animate it - fade in and move up.
#keyframes ios_about_button
{
from { opacity: 0; transform: translate(0,40) }
to { opacity: 1; transform: translate(0,0) }
}
Button[id='buy']
{
animation-name: ios_about_button;
animation-duration: 0.4s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
<Button id="buy" class="bttn-style" text="BUY" tap="{{ onSubscribeThisApp }}" opacity="0" />
Above is the css and xml code.
It works as expected - note the opacity="0" in the xml - trying to achieve a fade-in.
The problem is that when I tap on the button - the animation runs again.
Not sure what's going on...
I have a pretty simple (or at least I think it is) animation. All I'm animating is the -webkit-background-size.
#bubble { position:relative; width:397px; height:326px; background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right; -webkit-background-size:100% 100%; -webkit-animation-name:resize; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: ease-in; }
#-webkit-keyframes resize {
0% { -webkit-background-size:0% 0%; }
90% { -webkit-background-size:100% 100%; }
95% { -webkit-background-size:95% 95%; }
100% { -webkit-background-size:100% 100%; }
}
It works nicely in Safari on the desktop, but on the iPhone, the animation is very choppy. Which is odd, because I've seen lots of demonstrations of CSS animation on my iPhone that run silky smooth. Am I going about this animation the wrong way?
Basically, it's a speech bubble that starts out at 0%, scales up to 100%, then 95%, then 100%. Sort of like a bounce-out ease effect.
You must do some trickery to allow the GPU to kick in, if you can scale the whole div instead of just the background then this will make it smooth...
#bubble {
position:relative;
width:397px;
height:326px;
background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right;
-webkit-background-size:100% 100%;
-webkit-animation: resize 1s ease-in 1; /*shorthands are better!*/
-webkit-transform: scale3d(100%, 100%, 1);
}
#-webkit-keyframes resize {
0% { -webkit-transform: scale3d(0%, 0%, 1); }
90% { -webkit-transform: scale3d(100%, 100%, 1); }
95% { -webkit-transform: scale3d(95%, 95%, 1); }
100% { -webkit-transform: scale3d(100%, 100%, 1); }
}
Try to add -webkit-transform:transform to the bubble css