I have a keyframe animation using CSS, and I would like to (automatically) make it centered for all resolutions, browsers, etc. I've tried doing margin: auto, etc. But that always results in my animation not working. Perhaps I am inserting it incorrectly, but I don't know. This is what I currently have, without any auto margins.
Here is my CSS code:
#image {
text-align:center;
width:276px;
position:absolute;
left:50%;
margin-left: -130px; /*this is what works for me, I'd imagine it's not */
margin-top: -240px; /*centered for everyone */
animation:dampe 0.3s infinite;
-webkit-animation:dampe 0.3s infinite;
}
#keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
#-webkit-keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
Here is my HTML code:
<div id="image">
<img src="image.png" />
</div>
By aligning the element using the margin-left property and offsetting by a fixed px value like in Joseph's solution you will not achieve a centered effect on all resolutions.
To achieve the centered effect on all resolutions offset your element by 50% from the left side and afterwards set the transform:translate3d(-50%,0,0). This will ensure that your element is always centered on the X axis, no matter the screen size.
/*CSS Markup*/
.centerX{
left:50%;
-webkit-transform:translate3d(-50%,0,0);
}
Related
So im trying to move an object from the left side of the screen to the right side, with help of css keyframes so i did this:
0%{transform: translateX(0%);}
100%{transform: translateX(100%);}
But the thing with 100% doesnt work it just moves like 1/8 of the screen to the side, instead of completely to the right side.
I hope somebody can help, thanks in advance
transform: translate() translates the element relative to where it was before, not to its parent. To move relatively to the viewport, use vw units:
body {
margin: 0;
padding: 0;
}
div {
height: 5em;
width: 5em;
background: red;
animation: animation 1s infinite;
}
#keyframes animation {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(calc(100vw - 5em));
}
}
<div></div>
My image that is using #keyframes scales beyond my div="image-zoom". It zooms correctly but as it zooms within the div it goes outside and the horizontal slider increases.
HTML:
<section id="intro-section">
<div id="image-zoom">
<h1>WELCOME</h1>
</div> <!-- /.container -->
</section>
CSS:
#intro-section {
height: 400px;
width: 100%;
}
#image-zoom {
background-image: url(/img/fairy-bg.jpg);
background-size:100%;
position:relative;
top:237;
left:0;
width:100%;
height:400px;
animation: zoom 30s infinite;
padding: 0;
}
#keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% { transform:scale(1,1); }
}
I know it's simple but I can't see where the mistake is.
Try adding an overflow: hidden to the containing <div>
This is where the issue lies:
transform:scale(1.2,1.2)
The scale is more than the container size. (1 = container size)
I'm trying to create a CSS animation where it looks like a div rotates around an image (or another div) on the X axis.
I was able to create a rough idea of it at: http://codepen.io/Kupe517/pen/zBKGev but the animated div does not have the rotation effect I am looking for. I figure I need to add in some kind of rotateX() to the transform and add perspective but I just can't figure out the right combo. I've attached a rough image of the kind of animation I am trying to achieve.
Here is my current animation code:
#keyframes moveBack {
0%{transform:translateY(0); z-index:10;}
25%{transform:translateY(435px); z-index:10;}
26%{z-index:0;}
50%{transform:translateY(0) scale(.8); z-index:0;}
75%{transform:translateY(-435px); z-index:0;}
76%{z-index:10;}
100%{transform:translateY(0); z-index:10;}
}
Here is a simple 3d transition that looks like what you are trying to achieve. The issue is that you are using translate but your aim is to rotate on the X axis.
To launch the transition, hover the div:
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(110px);
transition:transform 2s;
}
div:hover p{
transform: rotateX(360deg) translatez(110px);
}
<div>
<img src="http://i.imgur.com/k8BtMvj.jpg"/>
<p>Hover the div</p>
</div>
If you want the rotating div to always face the user, you can add another rotation after the translatez property like this:
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(130px) rotateX(0deg);
transition:transform 5s;
}
div:hover p{
transform: rotateX(360deg) translatez(130px) rotateX(-360deg);
}
<div>
<img src="http://i.imgur.com/k8BtMvj.jpg"/>
<p>Hover the div</p>
</div>
These work because when you chain transform properties on the same declaration, the last one is made according to the presvious ones. The coordinate system moves with the previous transforms.
I feel bad for this answer; I'll get the animation accurate. One moment-
Edit: Fixed.
A bit sloppy, but here's a working example of the concept you're shooting for. Play with the numbers to get how you want it. Hard to tell from the diagrams for what type of flow you're looking for:
http://codepen.io/anon/pen/JKRxmY?editors=1100
(You had a pesky origin property that I didn't see. Threw in some TranslateZ rules to clean 'er up a bit. )
I also forked this working example after changing the orientation:
http://codepen.io/anon/pen/WxGPpM?editors=0110
(and original) http://codepen.io/pukidepa/pen/nkJmv?editors=0110
The key here is with transform:rotateY(Xdeg);
Try out some of the code. Here's your animation CSS as it stands:
#keyframes moveBack {
0% {
transform: translateY(0) translateZ(100px) rotateX(0deg);
z-index: 10;
}
25% {
transform: translateY(125%) translateZ(-50px) rotateX(-70deg);
z-index: 10;
}
50% {
transform: translateY(0%) translateZ(-100px) rotateX(-180deg);
z-index: 10;
}
75% {
transform: translateY(-125%) translateZ(-50px) rotateX(-270deg);
z-index: 10;
}
100% {
transform: translateZ(25px) translateZ(100px) rotateX(-360deg);
z-index: 10;
}
}
Tip: when working with these types of rotations, it's best to remove the non-essentials like z-index at first and just get the movement down. You can always worry about that stuff later.
For a more circular rotation, you may want to stagger the effects of the rotation with the translation. In other words, try having one of the effects happen slightly before the other at different points of the animation.
I am trying to figure out a way to smoothly animate a responsive change to some elements' display property when the browser size reaches a certain breakpoint. I would like to use CSS transitions, but they do not apply to the display property so I may have to figure out a workaround. To be clear, I am only having trouble animating changes to the vertical orientation of elements that were previously arranged horizontally. Other, simple, responsive animations have been set up without issue.
Here is a simple example
In that example, I have set up effective transitions for the div dimensions that activate at given breakpoints. The final (smallest window) transition causes the divs to line up vertically. At first, this was achieved by simply changing the divs from display:inline-block; to display:block;. However, this could not be animated using CSS transitions, so I tried an alternative method. The alternative involved changing the divs from position:relative; to position:absolute; and adjusting their top properties. I thought CSS transitions would be able to effectively animate the change in top but that does not seem to happen.
Does anyone have any suggestions?
Your problem is that you change from relative to absolute. That can not be transitioned in any way.
Just try to keep your styles and change only numeric properties.
For instance, you can keep using relative position, and adjust the left and top values accordingly:
#media (max-width: 680px) {
.box {
width:150px;
height:150px;
}
#box1 {
left: 165px;
top:10px;
}
#box2 {
left: 0px;
top:170px;
}
#box3 {
left: -165px;
top:330px;
}
}
demo
Change a little bit the style to avoid the ugly behaviour in smaller screens
#media (max-width: 680px) {
.box {
width:150px;
height:150px;
margin-left: -77px;
margin-right: -77px;
left: 0px;
}
#box1 {
top:10px;
}
#box2 {
top:170px;
}
#box3 {
top:330px;
}
}
new demo
The problem came when the container width could no longer hold the 3 divs, and they begin to flow to another row.
instead of using positions or display use float element and give another break point so that you can have a view how transition is going on..
here is fiddle http://jsfiddle.net/822bX/
.box {
float:left;
width:300px;
height:300px;
margin:0 5px;
}
#media (max-width: 680px) {
.box {
width:150px;
height:150px;
-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
clear:both;
}
}
#media (max-width: 380px) {
.box {
width:80px;height:80px;
}}
I am using transition:scale(1.2) to hide a div in the bottom left corner of the viewport.
My current approach is scaling from the center as expected:
Fiddle for 'CURRENTLY'
I want to scale it as if the div would take up the whole screen:
Fiddle for 'DESIRED'
The above is done by scaling the whole body. But instead of using another parent, I was wondering if there is another way to tell CSS in which direction the scaling should occur.
How to use transition:scale(1.2) as seen in DESIRED without using a full-size div?
You can change the transform-origin:
Something like this should be close to what you are looking for:
-webkit-transform-origin: 120% -40%;
Demo Fiddle
Modified CSS:
#clock {
position:fixed;
bottom:8%;
left:7%;
color:#fff;
transition:all .8s;
-webkit-transition:all .8s;
transform-origin: 120% -40%;
-webkit-transform-origin: 120% -40%;
}
body {
overflow:hidden;
}
body:hover #clock {
-webkit-transform:scale(1.2);
transform:scale(1.2);
opacity:0;
}
Edit Because you are using left/bottom percentage based positioning for the clock, this may be closer to the effect you are looking for. Going back to a center based transform origin and transitioning left/bottom closer to the corner will provide a bit more of the affect that it is being scaled from the upper right corner of the parent.
Demo Fiddle 2
Modified CSS:
#clock {
position:fixed;
bottom:8%;
left:7%;
color:#fff;
transition:all .8s;
-webkit-transition:all .8s;
transform-origin: center center;
-webkit-transform-origin: center center;
}
body {
overflow:hidden;
}
body:hover #clock {
-webkit-transform: scale(1.2);
transform: scale(1.2);
bottom: 1%;
left: 0%;
opacity:0;
}