I'm trying to make line moving infinitely but the problem that the line back for another loop late.. I want it to be in the left immediately when the line off screen
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #222;
color: #fff;
}
.navbar{
padding: 2rem;
position: relative;
}
.navbar span{
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #fff;
animation: animate 6s linear infinite;
}
#keyframes animate {
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
<nav class="navbar">
<span></span>
</nav>
You can use a combination of positioning in relation to the parent - left property - and relative positioning (relative to the width of the line itself) - transform: translateX property.
So the line starts at minus its own width and ends at the width of the parent (as you have now) with no translation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #222;
color: #fff;
}
.navbar {
padding: 2rem;
position: relative;
overflow: hidden;
}
.navbar span {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #fff;
animation: animate 6s linear infinite;
}
#keyframes animate {
0% {
left: 0;
transform: translate(-100%);
}
100% {
left: 100%;
transform: translate(0);
}
}
<nav class="navbar">
<span></span>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #222;
color: #fff;
}
.navbar{
padding: 2rem;
position: relative;
width: 100%;
animation: animate 6s linear infinite;
}
.navbar span{
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #fff;
}
#keyframes animate {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<nav class="navbar">
<span></span>
</nav>
</body>
</html>
So I'm going to explain what I did here. It's a combination of Keyframes and the transform - translate in CSS. Now, if you used animation alone to try to move from left to left, you'll notice a default delay from the end of one keyframe to the other, especially since you're not moving along the corners of the .navbar box (topleft-topright-bottomright-bottom-left and repeat). Using the animation-delay property will not solve it either. There are two options, using CSS Flex-box property and using Transforms. Since you are working with keyframes, I made use of the transforms-translate property.
The issue with transform - translate, is that translate will move the element with respect to the width of itself. Hence, having the animation within .navbar span and setting translate for keyframe 100% will only move the element to the end of the width of the element which in this case is 100px. To go around this, we will set the animation property to the parent box itself and translate the child from 0% to 100%.
Related
I have a simple card flip animation which works well on the browsers I've tested.
However there is an issue on Safari when this card flip animation happens on top of another div which is also being animated. For some reason on Safari when the card flips it kind of disappears behind the "background div". I thought that maybe it's a z-index issue but from what I tried it is not.
To make the example simple the background div is grey. The idea is to have a glowing effect in the background.
Below is the example of the code that I have, I've tested this on Chrome, Firefox and Edge it's working fine, however on Safari when the card is flipped it disappears.
$(document).ready(function() {
$('button').click(function() {
$('.wrapper').toggleClass('flip');
});
});
.perspective {
perspective: 1000px;
margin: 50px;
position: relative;
width: 175px;
height: 250px;
}
.some-bg {
background-color: #ccc;
background-position: center;
width: 100%;
height: 100%;
position: absolute;
animation: test-bg-animation 1s infinite linear;
}
#keyframes test-bg-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wrapper {
width: 125px;
height: 175px;
border: 1px solid blue;
position: absolute;
transform-style: preserve-3d;
transition: all 250ms;
top: 35px;
left: 25px;
}
.wrapper.flip {
transform: rotateY(180deg);
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
background-color: tomato;
}
.front {
background-color: #bada55;
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective">
<div class="some-bg"></div>
<div class="wrapper">
<div class="card-face front">Front</div>
<div class="card-face back">Back</div>
</div>
</div>
<button>Flip Me!</button>
You can fix this by nesting the .some-bg and the .wrapper div into absolute positioned divs with a relative positioned parent.
See this fiddle for an example:
https://jsfiddle.net/voLzv68w/
Consider this sample.
http://jsfiddle.net/dfabulich/ncbzz5zu/3/
<html>
<body>
<style>
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
from { background-color: red; left: 0; }
to { background-color: blue; right: 0; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
</style>
<div class=container>
<div class=animated>
</div></div>
Expected: The red rectangle should smoothly animate from left to right as the color changes from red to blue.
Actual: In Chrome/Firefox, the red rectangle slowly changes color to purple, then teleports from left to right without animating, and then slowly changes from purple to blue. In Safari, the rectangle appears on the right and never moves from there, while animating from red to blue.
Why is this happening? How can I fix it? (I need to fix it in CSS… no JS, no jQuery.)
You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.
Also need to animate background color.
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation: 3s linear 0s slide infinite;
}
#keyframes slide {
from { left: 0; }
to {
left: 100%;
transform: translateX(-100%);
background: blue;
}
}
<div class=container>
<div class=animated>
</div></div>
The problem is that you start animating property left, but then replace it with right in the end of animation, that's why it jumps. You should keep animating the same property to get the step by step animation progression.
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
from { background-color: red; left: 0; }
to { background-color: blue; left: 80%; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
<div class="container"><div class="animated"></div></div>
#keyframes slide {
from { left: 0;}
to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like: left: calc(100% - ##px);
}
Simply when you used right you told transition to change totally different property. That is why you were jumping between left: 0 what is left side of your screen to right: 0 what is right edge of your screen.
<html>
<body>
<style>
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
0% { background-color: red; left: 0; }
100% { background-color: blue; left: 100%; margin-left: -20%; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
</style>
<div class=container>
<div class=animated>
</div></div>
see this snippet...
This is what it should look like:
http://jsfiddle.net/ncbzz5zu/11/
And this is the fix for it:
#keyframes slide {
from { background-color: red;
left:0%;}
to { background-color:blue;
left:80%;}
}
Basically, the animation didnt know what to do since you specified the initial left property but not the target value. It animated from left:0 to left:initial. Right fulfills a similar function to left but its still another property.
In my project I have screen which should ease-in from right side of the screen so for that thing I have used transform: translateX(100%) and then changing that to transform: translateX(0%). it works fine I able to achieve the ease-in effect but in that screen I have action button which has css property of Position: Fixed;Bottom: 0px; but this is not working I mean its not sticking in the bottom of the screen.
Here is my JSfiddle : https://jsfiddle.net/sureshpattu/a1seze4x/
Html:
<header>
Heading
</header>
<div class="page__popup page__popup--ease-in-right page__action-btn--visible" style="height: 382px;">
<div class="container">
</div>
<button class="js-action-btn">
SELECT ROOMS
</button>
</div>
Css:
header {
background: #fff;
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
box-shadow: 2px 2px 10px #000;
}
.container {
height: 382px;
}
.page__popup {
position: absolute;
top: 100vh;
z-index: 8;
display: block;
overflow-y: scroll;
max-height: 100vh;
width: 100%;
height: 0;
background: #ffffff;
.js-action-btn {
position: relative;
bottom: -50px;
transition: all 0.25s ease-in-out;
}
//Themes
&--ease-in-bottom {
&.visible {
transition: height 0.25s ease-in-out;
top: 54px;
right: 0;
bottom: 0;
left: 0;
}
}
&--ease-in-right {
transform: translateX(100%);
height: 100vh;
top: 60px;
&.visible {
transition: transform 0.25s ease-in-out;
transform: translateX(0);
}
}
}
.page__action-btn--visible {
.js-action-btn {
background: red;
width: 100%;
height: 30px;
position: fixed;
bottom: 0;
z-index: 10;
box-shadow: 0 7px 4px 10px rgba(0, 0, 0, .12);
}
}
This is not a bug.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
So according to the spec: the element with fixed positioning will become relative to the element with the transform - not the viewport
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
I know we can transform shape (e.g. circle to square) from one state (e.g. top: 0) to another state (e.g. top: 20px). But I'm not sure how we can keep the shape at both states intact (i.e. keeps it circled # top: 0 and top: 20px), but ONLY during transition I want to transform its shape. An example of what I want to achieve is somewhat like this:
Here's a pure css version of what you want. It transforms only during the transition. Not hard at all. Just use keyframes to specify what properties you want changed and when.
The HTML
<div class="childAnimated"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
And the CSS
.child {
border: .5em solid white;
width: 3em;
height: 3em;
border-radius: 5em;
margin-bottom: 1em;
}
.childAnimated {
position: fixed;
top: 1em;
left: 1em;
z-index: 999;
background-color: white;
width: 3em;
height: 3em;
border-radius: 5em;
-webkit-animation: gooAnim 4s infinite;
}
#-webkit-keyframes gooAnim {
0% { top: 1em; }
25% { top: 3.8em; left: 1.5em; width: 2em; height: 2em; }
50% { top: 6em; width: 3em; height: 3em; left: 1em;}
75% { top: 8.8em; left: 1.5em; width: 2em; height: 2em; }
100% { top: 11em; }
}
If you want to see it in action, here's the codepen. Run it in Chrome if you can. http://codepen.io/shuffguy/pen/JdLXeM
This was a quick example, but if you play around with the keyframe resizing properties you can definitely emulate that example exactly with keyframes.
U can use the #keyframe animation in css for this, just take a look: https://css-tricks.com/snippets/css/keyframe-animation-syntax/
And here is a exemple what i made with keyframes and jquery animate:
Css
#box{
display: block;
background: red;
width: 300px;
height: 300px;
border-radius: 100%;
position: relative;
}
#keyframes change_form {
0% {
width: 300px;
}
50% {
border-radius: 0%;
width: 50px;
height: 100px;
}
100% {
width: 300px;
height: 300px;
}
}
Jquery
$(document).ready(function(){
window.setTimeout(function(){
$( "#box" ).animate({
"top":"+=134px"
,
},{
step: function(now) {
if (now >= 11) {
$("#box").css({'transition':'all linear 1s', 'animation':'change_form ease 2s '});
}
} }
);
}, 2000);
});
In a simple Div
<div id="box"></div>
Just a example what i make to show u how to make this effect, u can make this only with css, just putting the 'animation' in your div
Hi I'm using something similiar to the following to get a div positioned in the middle of the screen:
<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>
However the problem with this is it positions the item in the middle of the page not the screen. So if the page is a few screen high and I'm at the top of the page (the top part of the part is displayed on the screen) when I make the div appear it's not even on the screen. You have to scroll down to view it.
Can someone please tell me how you'd make it appear in the middle of the screen?
just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
I think this is a simple solution:
<div style="
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: #f3f3f3;">Full Center ON Page
</div>
Use transform;
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Javascript Solution :
var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
Try this one.
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Just put margin:auto;
#mydiv {
margin:auto;
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
<div id="mydiv">Test Div</div>
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
This worked for me
Short answer, Just add position:fixed and that will solve your problem
<html>
<head>
<style type="text/css">
#mydiv {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100px;
height:200px;
margin:auto;
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
Well, below is the working example for this.
This will handle the center position if you resize the webpage or load in anysize.
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>
In above sample loading div will always be in center.
Hoping this will help you :)
Two ways to position a tag in the middle of screen or its parent tag:
Using positions:
Set the parent tag position to relative (if the target tag has a parent tag) and then set the target tag style like this:
#center {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Using flex:
The parent tag style should looks like this:
#parent-tag {
display: flex;
align-items: center;
justify-content: center;
}
#div {
top: 50%;
left: 50%;
position:fixed;
}
just set the above three properties any of your element and there you Go!
Your div is exactly at the center of the screen
In ur script page...
$('.a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
Use a-middle class in the Div...
<div class="a-middle">
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>
USING FLEX
display: flex;
height: 100%;
align-items: center;
justify-content: center;
width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
For this you would have to detect screen size. That is not possible with CSS or HTML; you need JavaScript. Here is the Mozilla Developer Center entry on window properties https://developer.mozilla.org/en/DOM/window#Properties
Detect the available height and position accordingly.