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...
Related
I'm trying to add custom ripple effect in my custom button.
i have a layout
<GridLayout row="1" rows="*" columns="*,*"
class="text-center">
<StackLayout row="0" col="0" verticalAlignment="center"
touch="onTouch">
<Label text="btn1" />
</StackLayout>
<StackLayout row="0" col="1" verticalAlignment="center"
touch="onTouch">
<Label text="btn2" />
</StackLayout>
</GridLayout>
css
StackLayout{
border-width: 1;
border-color: #ecf3f8;
height:100%;
width:100%;
background-color: #c3edfa;
color:rgb(44, 23, 23);
font-size: 18;
text-align: center;
}
/* ~~~~~~~~~~~~~~
Ripple Effect
~~~~~~~~~~~~~~ */
.ripple {
width: 2px;
height: 2px;
position: absolute;
border-radius: 50%;
background-color:rgba(255, 255, 255, 0.288);
animation: rippleEffect 0.5s ease-in-out;
}
#keyframes rippleEffect {
0% {
opacity: 1;
transform: scale(10,10);
}
50% {
opacity: 1;
transform: scale(100,100);
}
100% {
opacity: 0;
transform: scale(0,0);
}
}
js
exports.onTouch = function (args) {
args.object.className = "ripple";
setTimeout(
function () {
args.object.className = "";
}, 500);
}
The animation effect is working fine.
But the ripple effect is overwriting my background color.
and also the ripple effect is not happening where i touch on button rather it will pop up from center.
the complete demo is here
https://play.nativescript.org/?template=play-js&id=Ds0KtG
I've got the following CSS in my page css file. Crashes in the {N} css parsing code
#keyframes example
{
from { transform: translate(0, 0); }
to { transform: translate(0, 100); }
}
.session-favorite-selected
{
animation-name: example;
animation-duration: 1;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.
I am trying to find a transitioning CSS code to transition two images. I want the first image to be shown for 4 seconds then fade into a second image which will stay the same for for seconds then fade back to the first. Right now I am not using CSS and am finding most CSS tutorials are formatted for an on :hoover. I want my image to constantly change without a :hover being needed.
The flexi ad coding I am using now is a ans works fine in waterfox and explorer but you can see the images being loaded in chrome with a bad flicker.
Here's the example of what I am working with. The script I am using now is actually transitioning through 30 images i made some that fade from one to the next and thats why it looks like it fades. I would like some kind of CSS that will only require 2 images and fade one to the next every 4 seconds.
http://www.vulgarmediaproductions.com/walt/walt.shtml
You need to use keyframe animations for this - DEMO
HTML:
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>
CSS:
img {
position: absolute;
width : 320px;
height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
#keyframes fader { to { opacity: 0; } }
EDIT
If your images have transparency, then you'll need to animate the opacity for both of them, not just for the one on top. Like this - DEMO
img {
opacity: 0;
position: absolute;
width : 256px;
height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
#keyframes fadein { 50% { opacity: 1; } }
#keyframes fadeout { 50% { opacity: 0; } }
Also, keep in mind that you'll have to use prefixes (I did not use any since dabblet includes -prefix-free and it's easier to highlight the idea that way):
img:first-child {
-webkit-animation: fadein 8s infinite alternate; /* Chrome, Safari, Android, Blackberry */
-moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
-o-animation: fadein 8s infinite alternate; /* Opera 12 */
animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
#-webkit-keyframes fadein { 50% { opacity: 1; } }
#-moz-keyframes fadein { 50% { opacity: 1; } }
#-o-keyframes fadein { 50% { opacity: 1; } }
#keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */
Not tested and just written on the fly, but should work.
If you have any problems getting it to work, let me know...
You may want to debug this using FireBug for Firefox. It helps you alot playing arround with CSS, HTML and JavaScript.
CSS3:
.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }
HTML:
<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
<div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>
JS:
function ssCycle(_obj)
{
var _oList=_obj.getElementsByTagName('div');
for (var _trace=0;_trace<oList.length;_trace++)
{
if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
{
_oList[_trace].style.opacity='0.0';
try
{
_oList[(_trace+1)].style.opacity='1.0';
}
catch(_e)
{
_oList[0].style.opacity='1.0';
}
}
}
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');
I am trying to create a cascading effect by applying an animation to each child element. I was wondering if there is a better way to do it than this:
.myClass img:nth-child(1){
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
-webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
-webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
-webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
-webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}
and so on...
So basically, I'd like to have an animation starting for each child but with a delay.
Thanks for any input!
Addition: Maybe I did not properly explain what was my concern: It's about how to do this no matter how many children I have. How to do this without having to write down the properties for every child... for example, when I don't know how many children there are going to be.
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;
}
}
What you want is the animation delay property.
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myClass img {
float: left;
margin: 20px;
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }
<div class="myClass">
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
</div>
A CSS preprocessor such as Less.js or Sass can reduce the amount of repetition, but if you're working with an unknown number of child elements or need to animate a large number then JavaScript will be the best option.
In the [hopefully near] future when attr and calc are fully supported, we'll be able to accomplish this without JavaScript.
HTML:
<ul class="something">
<li data-animation-offset="1.0">asdf</li>
<li data-animation-offset="1.3">asdf</li>
<li data-animation-offset="1.1">asdf</li>
<li data-animation-offset="1.2">asdf</li>
</ul>
CSS:
.something > li
{
animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}
This would create an effect where each list item animates in what would appear to be random order.
You can also make use of the transition-delay property in CSS and use JS or JQuery to assign a different delay for each child element . ( Assume s to be the starting delay in seconds )
$(".myClass img").each(function(index){
$(this).css({
'transition-delay' : s*(1+index) + 's'
});
});
So, the children will have the transition delays like 1*s, 2*s, 3*s ..... and so on. Now to create the actual animation effect simply set the required transition and the children will be animated in a sequence. Works like a charm !
If you have a lot of items (for example: I have paginated table with >1000 items and wanna each row to be animated with delay when page is loads), you can use jQuery to solve this and avoid css file rising in size. Animation delay dynamically increases.
$.each($('.myClass'), function(i, el){
$(el).css({'opacity':0});
setTimeout(function(){
$(el).animate({
'opacity':1.0
}, 450);
},500 + ( i * 500 ));
});
EDIT:
Here is the same code I adjusted to use with animate.css (install additional plugin before use https://gist.github.com/1438179 )
$.each($(".myClass"), function(i, el){
$(el).css("opacity","0");
setTimeout(function(){
$(el).animateCSS("fadeIn","400");
},500 + ( i * 500 ));
});
Where "fadeIn" is animation type, "400" - animation execute time, 500 - delay for each element on page to be animated.
Like this:
.myClass img {
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.myClass img:nth-child(2){
-webkit-animation-delay: 0.2s;
}
[...etc...]