I'd like to create an animation that makes a diagonal line to grow, from width:0, to width:400px, and it starts from left ( bottom left ) to right ( top right ). I know how to do this, but with a horizontal line ( with keyframes, 0% { width:0px; } 100% { width:400px; } ), but when it comes to transform that line into a diagonal line, at the start of the animation, it also changes it's position. Any ideas? Thank you!
You can try this:
.line {
height:10px;
width:0;
margin-top:100px;
background:red;
transform:rotate(-45deg);
transform-origin:left;
animation:grow 1s linear forwards;
}
#keyframes grow{
to {width:100px;}
}
<div class="line"></div>
Related
I wanna rotateY() but from center of this earth image. Now it's rotating from the right side. Here is my code:
#keyframes rotate {
to {
transform: rotateY(-360deg);
}
}
http://jsfiddle.net/qwrg9684/
It works if you operate on the image directly. https://jsfiddle.net/akso4r6q/
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" />
#logo {
animation: rotate 5s linear infinite;
transform-origin: center center;
}
#keyframes rotate {
to {
transform: rotateY(360deg);
}
}
If you need it to be in a div you can also set display: inline-block;. The appearance of rotating around the right side of the image is actually the rotation happening around the center of the enclosing div which is expanding horizontally to fit the viewport.
You can see a fiddle here that shows this with a text element that is a sibling of the image.
I am having trouble running a single animation using different divs. I just want to switch between different backgrounds using opacity in animation but i can't run it on different divs in a single animation
I have tried to make this animation on section container it was done but it does not give me transition with it I also want some transition so that's why I want to run this animation using different divs just like the one made on fivers homepage...!!
You can apply same animation on different elements by just giving all the elements(on which wanted animation) a same class and then selecting that class by dot operator and then in css rule define the animation property. Now, all elements will get this animation.
Suppose in html we have many divs on which we had applied some background color or image. And we want that there is a animation on all of them that firstly the background is light and with time background becomes dark(its original color).
So defining a single keyframe:-
HTML CODE
<div class="red same-animation"></div>
<div class="blue same-animation"></div>
<div class="green same-animation"></div>
<div class="yellow same-animation"></div>
CSS CODE
div{
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
opacity: 0 ;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}
.yellow{
background: yellow;
}
.same-animation{
animation: change-opacity 5s ease-in-out 0s 1;
}
div:hover{
transition: all 5s;
opacity: 1;
}
#keyframes change-opacity {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
LINK OF CODE - https://codepen.io/aryansharma-2002/pen/mdpRoqW
So in this example firstly animation will be done in 5second to all divs such that there opacity will increase then all will disappear. Then if hover on any div then it will visible with transition. So tried to explain both concepts.
If any doubt or suggestion, please comment
This is the code of the slide show in html
<div id="slideshow">
<img src="images/slideshow/1.png"/>
<img src="images/slideshow/2.png"/>
<img src="images/slideshow/3.png"/>
<img src="images/slideshow/4.png"/>
<img src="images/slideshow/5.png"/>
<img src="images/slideshow/6.png"/>
</div>
And this is my css for it
#slideshow{
width:1100px;
height:432px;
position:relative;
border:3px solid #404A7F;
margin:auto;
margin-top:35px;
overflow:hidden;}
#slideshow img{
position:absolute;
opacity:0;
animation:move 30s infinite;}
#keyframes move{
0%{opacity:1;}
100%{opacity:1;}}
#slideshow img:nth-child(1){
animation-delay:0s;}
#slideshow img:nth-child(2){
animation-delay:5s;}
#slideshow img:nth-child(3){
animation-delay:10s;}
#slideshow img:nth-child(4){
animation-delay:15s;}
#slideshow img:nth-child(5){
animation-delay:20s;}
#slideshow img:nth-child(6){
animation-delay:25s;}
But when the last image shows the slideshow doesn't start again from the first image.
Can someone please tell me what's wrong?
The problem is that you fade from 1 opacity to 1 opacity. After you correct that, it's till not okay, since you fade in during the whole period of 30 seconds, so an image is not fully faded in when the next image starts. And lastly, it doesn't wrap well, since it starts without any visible image.
Here is a fixed version of what I think you tried to achieve. Note I used colors instead of image for the demo, but they are still actual image elements, and it should work fine in your situation.
Basically what it does:
Shows the last image always, but with a z-index of -1, so it is always visible behind the others. This makes that image the one that is immediately visible.
Fades in quickly (during only a part of the 5 seconds in which the image is visible)
Fades out at the same pace, so fading out the prio to last image actually shows the last one.
The trick is to fix the animation so the images fade in and out at the right times within the animation.
I've commented the various frame in the animation to explain why I chose those values.
Possibly even better: I think it should be possible to show the first one too, by changing making the opacity 1 for the first 17%, then fade to 0 from 17% to 22%, and then fade to 1 again from 95% to 100%. But unfortunately, I'm leaving for Christmas dinner, and I can't try it out now. ;)
#slideshow{
width:1100px;
height:432px;
position:relative;
border:3px solid #404A7F;
margin:auto;
margin-top:35px;
overflow:hidden;}
#slideshow img{
position:absolute;
opacity:0;
animation:move 30s infinite;
width: 300px; height: 200px; /* Demo only */
}
#keyframes move{
/* Relevant information. You have 6 images, taking up 16.66% (say 17%) of the animation
time. So fading in needs to take place within this time.
Also, to wrap properly, the last image is put in the back and is always visible, so to
show that, you basically hide the prior one. Because of this, fading out has to
commence at 17% and has to have the same duration as the fading in.
*/
/* Start transparent */
0%{opacity:0;}
/* Move in a relatively short time to full opacity for a fade in effect. This can be anything from 0 to 17% */
5%{opacity:1;}
/* Stay at that level until after the next image has faded in at 100 / 6 ~ 17%. */
17%{opacity:1;}
/* Fade out at the same pace. This is needed for the animation to wrap seemlessly,
so 17% + 5% = 22% until full fade out */
22%{opacity:0;}
/* Stay there until the next round */
100%{opacity: 0};
}
#slideshow img:nth-child(1){
animation-delay:0s;
background-color: red;
}
#slideshow img:nth-child(2){
animation-delay:5s;
background-color: orange;
}
#slideshow img:nth-child(3){
animation-delay:10s;
background-color: yellow;
}
#slideshow img:nth-child(4){
animation-delay:15s;
background-color: green;
}
#slideshow img:nth-child(5){
animation-delay:20s;
background-color: blue;
}
#slideshow img:nth-child(6){
animation-delay:25s;
background-color: purple;
opacity: 1;
z-index: -1;
}
<div id="slideshow">
<img src="images/slideshow/1.png"/>
<img src="images/slideshow/2.png"/>
<img src="images/slideshow/3.png"/>
<img src="images/slideshow/4.png"/>
<img src="images/slideshow/5.png"/>
<img src="images/slideshow/6.png"/>
</div>
I have a transition from height:0, width:0 to a certain width. It is working fine, from the bottom left to the top right. Now I thought if I change the float to 'right', the transition would go from bottom right to top left. Is there some way to make this transition?
css:
.ablauftext{
height:0;
width:0;
position:absolute;
overflow:hidden;
background-color:white;
transition: all 1s ease;
-webkit-transition: all 1s ease;
bottom:90px;
}
.active{
height:400px;
width:400px;
}
javascript:
$('#planung').click(function(){
if(!$current.is('#planungtext')){
$($current).removeClass('active');
setTimeout(function(){$('#planungtext').addClass('active')}, 1000);
$current = $('#planungtext');
}
});
I have IDs on my elements with only the floats, so I don't think I have to add this CSS here.
It is working now, I simply had to add a the right position, like so:
.yourdiv{
right:anyamount;
}
As you can see from the jsfiddle this animation flickers in webkit. It doesn't seem to matter if the animation is infinite or not. How can this be fixed? I have tried everything for hours. All the standard tricks don't seem to work on this example. Thanks for your time.
here is the code:
body {
background-color: #000;
}
#box {
width: 200px;
height: 200px;
top:20px;
left:20px;
position:absolute;
border: 1px solid red;
-webkit-animation: box 20s linear infinite normal;
}
#-webkit-keyframes box {
0% {-webkit-transform: translate(0,100px);}
50% {-webkit-transform: translate(100px,0);}
100% {-webkit-transform: translate(0,100px);}
}
EDIT: RCorrie was right, going into the color settings of my monitor and tweaking them solved the problem!
Thereason this happens is because the element is rendered at half pixel offset, to instead of having 1 pixel of 100% opacity, it'll be spread over 2 pixels both 50% opacity. It rapidly switches between 100% and 2x50% as it moves along, so that is what makes it flicker.
You could fix it by either making the line thicker, or speeding up your animation (the former being more effective at fixing it)