Animate widget using CSS3

Hi Guys

Maybe all of you already know that animating things on a page is absolutly easy with CSS3.
There is no extra javascript needed. It all about css and setting class names to elements.
Maybe IE is not supporting css3 right now but it will come soon.

Setting css class names to vaadin controls is easy so vaadin already supports the full set of
css3 animations. For now i see only one thing is missing. If i like to use a translation as transition
between two requests producing a new layout(maybe like switching screens on an iphone)
then i need to set the animation classname to the current layout and then request the server for the new layout asynchronous. Something like a clientside class callback when button clicked or so.
Yes, i think css3 will be very cool and the way to get animation to webapps.

//example for webkit browsers

@-webkit-keyframes nonsense {
	0% {
		left: 0px;
		opacity: .4;
		width: 100%;
		
	}
	50% { 
		 -webkit-transform: rotate(180deg);
		opacity: .8;
		
	}
	80% {
		 -webkit-transform: rotate(360deg);
		left: 200px;
		opacity: 1;
		width: 50%;
	}
	100% {
		-webkit-transform-origin-z:100%;
		left: 0px;
		opacity: .4;
		width: 100%;
		
	}
}
.animate-out {
	-webkit-animation-name: nonsense;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;   
    -webkit-animation-timing-function: ease-out; 
	-webkit-animation-fill-mode:forwards;
	position: relative;
	left: 0px;
}

Hi Mr. Stefan

How can i use this css animation in a loop, continuously .
Please help me .
Thanks
Mukesh


http://stackoverflow.com/questions/6289507/webkit-css3-animation-loop


http://stackoverflow.com/questions/23458640/how-to-have-css3-animation-to-loop-forever

Thanks a lot Mr Marius
i followed your link and i got solution of my problem a bit. Animation is working well for single image. But main problem is how i can slide multiple images in a single panel.Is it posible to do the same with css in vaadin.
Please help me.

Thakns
Mukesh

Why do you not just add the StyleName to multiple images or did I misinterpret your problem?

Hi Mr. Marius
I had just used stylename for multiple images. Just the last one image is slidding. all othe are rotating in background only once.

My vaadin code is as below:
Image image1=new Image(“1”, new FileResource(new File(basePath+“/WEB-INF/images/abc1.jpg”)));
Image image2=new Image(“2”, new FileResource(new File(basePath+“/WEB-INF/images/abc2.jpg”)));
Image image3=new Image(“3”, new FileResource(new File(basePath+“/WEB-INF/images/abc3.jpg”)));
image1.setStyleName(“slide1”);
image2.setStyleName(“slide2”);
image3.setStyleName(“slide3”);
horizontalLayout.addComponent(image1);
horizontalLayout.addComponent(image2);
horizontalLayout.addComponent(image3);

My scss file is
@mixin testvaadin2 {
@include valo;:
.slide1{
@include animation(valo-animate-in-slide-left 4s 5s infinite);
position:fixed;
top:150px;
left:150px;
width:80%;
height:50%;
}
.slide2{
@include animation(valo-animate-in-slide-left 4s 5s infinite);
position:fixed;
top:150px;
left:150px;
width:80%;
height:50%;
}
.slide3{
@include animation(valo-animate-in-slide-left 4s 5s infinite);
position:fixed;
top:150px;
left:150px;
width:80%;
height:50%;
}
}

Please help me to solve this problem. i want to slide all the images only one place(header of page).
Thanks
Mukesh

Well first things first:
As slide1, slide2 and slide 3 are defined the exact same you could use setStyleName(“slide1”) to get the same effect.
Secondly:
All 3 styles have the same fixed position which probably causes your images to overlay each other. You would have to define different top and left for them if that’s the case.
Is that your problem or did i misunderstood your problem?

Hi Mr. Marius,
Thanks for your reply :slight_smile:
As am new in vaadin, I understand your helpful instructions.But my problem is still same. I need to slide a couple of images one-by-one on the same place.Is it possible to slide a couple of images on a single Panel. Like if i have 3 images , i need to slide image 1 then slide image 2 then slide image 3 then again slide image 1, like a loop.If you have any kind of idea regarding this problem , Please help me to solve out the problem .

Thanks
Mukesh

I think i got what you want now:
You need to define a delay in your animations. So the animation part of your styles would be kind of like:

.slide1{ @include animation(valo-animate-in-slide-left 4s 0s infinite); ... } .slide2{ @include animation(valo-animate-in-slide-left 4s 1s infinite); ... } .slide3{ @include animation(valo-animate-in-slide-left 4s 2s infinite); ... } … being all your other position, left, … stuff.
These styles will image1 immediately, image2 after a 1 second delay and image 3 after a 2s delay. You can adjust the times however you want.

Thanks for reply Mr. Marius
Still i have sliding problem. Images are sliding but not in a proper manner.I added the images to the web page layout.
My code is :
image1.setStyleName(“slide1”);
image2.setStyleName(“slide2”);
image3.setStyleName(“slide3”);
addComponent(image1);
addComponent(image2);
addComponent(image3);
setComponentAlignment(image1, Alignment.TOP_CENTER);
setComponentAlignment(image2, Alignment.TOP_CENTER);
setComponentAlignment(image3, Alignment.TOP_CENTER);

My scss code is:
.slide1{
@include animation(valo-animate-in-slide-left 4s 0s infinite);
}
.slide2{
@include animation(valo-animate-in-slide-left 4s 4s infinite);
}
.slide3{
@include animation(valo-animate-in-slide-left 4s 8s infinite);
}

Is here any other way by that i can slide images smoothly.

Thanks
Mukesh

Okay I’m gonna be honest: I don’t really know what kind of animation you’re trying to achieve because what your styles are doing is letting 2 and 3 wait until the previous finished its animation once and then they do the same thing without any delay between them. This causes all of them to be on top.
Could you elaborate what exact motion you want?

Thakns for Reply Mr. Marius,
I know my requirement is a bit confusing to you, so sorry for that.
My need is to slide the images like that :
http://codepen.io/dudleystorey/pen/ehKpi

       Here images are slidng smoothly one-by-one. Can we do the same in vaadin using scss. If we can , please help me to              solve  this confusing problem.

Thanks
Mukesh

That cleared things up. So you want an image carousel.
If you don’t want to make a custom one but rather rely on an add-on there is the
Carousel Add-On
.
If you want to make it yourself and a bit more lightweight you could just use the code from codepen and use a CustomLayout to integrate it in Vaadin.
(replace mytheme with your theme name in following explanation)
create a html file in mytheme/layouts, like f.e. imageslider.html

[code]

</
[/code]add the css and the keyframes to the mytheme.scss. (The following is the complete scss file for my test project you just need to add the keyframes before your mixin and the styles inside your mixin) [code] @import "../valo/valo.scss";

@keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

@-webkit-keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

@mixin mytheme {
@include valo;

.slider { overflow: hidden; }
.slider figure img { width: 20%; float: left; }
.slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
@include animation(slidy 30s 0s infinite);
}

}
[/code]Then just use it like:

CustomLayout imgslider = new CustomLayout("imageslider"); imgslider.setSizeFull(); layout.addComponent(imgslider); Also look up CustomLayout to get more information about it.

Thanks a lot Mr. Marius :slight_smile:

This code is working very well , as i needed. I hope you will help me to solve these types of or other types of problem in future.

Thanks
Mukesh