My CodePen: http://codepen.io/leongaban/pen/wJAip
The orange gear is 80x80 and so is the white # logo.
I added the blue background so you can see that for some reason the orange gear looks like it is spinning off center.
Here is the image lined up in photoshop:
html:
<div id="spinner">
<div id="logo">
<img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/>
</div>
<div id="gear" class="spin">
<img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/>
</div>
</div>
CSS:
div#spinner {
position: absolute;
width: 80px;
height: 80px;
top: 35%;
left: 50%;
margin-left: -40px;
background: blue;
}
div#logo {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
z-index: 3;
}
#logo img {
width: 100%;
height:100%;
}
div#gear {
position: absolute;
top: 0;
left: 0;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
pointer-events: none;
z-index: 2;
}
.spin {
-webkit-animation: rotation 4.5s linear infinite;
animation: rotation 4.5s linear infinite;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
}
Make the image in the #gear div block level.
#gear img{
display:block;
}
http://codepen.io/anon/pen/rjfbl
For whatever reason your gear element is getting a height of 84px. This will cause it to spin off-axis. As an experiment you might wish to try setting height and on #gear to something very small (e.g. 0px) and watching it; it will be as though it's rotating around a point at the top of its bounding box.
Set the width and height of your gear explicitly to 80x, or 100%, and it will work.
div#gear {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
pointer-events: none;
z-index: 2;
}
Codepen (yours with the two added lines, width and height): http://codepen.io/anon/pen/LuBvI
Related
I am working on giving style to my menu, I really am something new in this
What I try to do is that when my menu appears it will see a transition from left to right, when it is hidden from it will be hidden from the left
I am really learning how to work with style sheets, I search the web and I have not managed to make it work as I wish
#media (max-width: 828px) {
#menu-header.show {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#menu-header {
display: block ;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 100px;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
width: 90%;
padding: 20px 20px;
max-width: 87.5%;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
-ms-transition: all 350ms ease;
-o-transition: all 350ms ease;
transition: all 350ms ease;
}
Some example where you can help me to solve my problem, since my menu currently makes a transition from top to bottom, and what I am looking for is from left to right
var header = document.getElementById('menu-header');
var button = document.getElementById('button');
button.addEventListener('click', function(){
header.classList.toggle('show');
});
#media (max-width: 828px) {
#menu-header {
display: block;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 0;
height: 100%;
width: 40%;
padding: 20px 20px;
transform: translateX(-100%);
transition: transform 350ms ease;
background: #c33;
}
#menu-header.show {
transform: translateX(0);
}
}
#button {
position: fixed;
right: 0;
top: 0;
}
<div id="menu-header">
MENU
</div>
<button id="button">
Click me
</button>
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images.
I was trying to give animation to the first image in the following way:
in 0% it starts at the beginning of the div (the fish's head is on the right)
in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion)
But it just rotates in 100% and no more. I don't know if this happens because I don't understand some concept of the animation property.
This is all my code:
#keyframes fish01 {
0% {
left: 0%;
transform: rotateY(180deg);
}
1% {
transform: rotateY(0deg);
}
99% {
transform: rotateY(0deg);
}
100% {
left: 90%;
transform: rotateY(180deg);
}
}
body {
background-color: black;
}
div {
position: absolute;
margin-left: 18%;
margin-top: 3%;
width: 800px;
height: 500px;
border: 5px double #DDDDDD;
border-radius: 1em 1em;
background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
float: left;
position: absolute;
margin: 0px;
top: 20%;
width: 100px;
height: 50px;
transform: scale(1.5, 1.5);
animation-name: fish01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in;
}
div img:nth-child(2) {
float: left;
position: absolute;
top: 20%;
left: 60%;
}
<section>
<div>
<img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" />
<img src="http://www.pets4homes.co.uk/images/fish_hero.png" />
</div>
</section>
I've tried everything in the #keyframes and looked into W3Schools website about animation property, but it didn't help me. Any suggestions?
Reason:
The behavior that is seen is expected one based on your #keyframes and the animation-direction setting. When the animation's direction is set to alternate, the UA executes the animation from 0 to 100 for the odd numbered iterations, 100 to 0 for the even numbered iterations.
As per your keyframes, the transform goes from rotateY(180deg) to rotateY(0deg) at 1% of the animation's duration itself and so during the odd numbered iterations you don't see any visible rotation (as duration is pretty small) and it goes from rotateY(180deg) (at 100%) to rotateY(0deg) (at 99%) because of which you don't get to see any visible rotation during even numbered iterations also.
The problem in writing keyframes for forward direction and re-using the same for the reverse (using animation-direction) is that it can be done only when the states are the same for both. In this case, it is not because the element should be in unrotated state during forward movement and should have rotateY(180deg) during the reverse movement.
Solution:
For the element to be seen in its rotated state, the transform must be retained for some time. So, for your case it is better to do away with the animation-direction: alternate setting and write both the forward and reverse motions within the keyframes itself like in the below snippet.
(Note: Since we are writing both forward and reverse motions within the keyframes, you may have to double the animation-duration).
#keyframes fish01 {
0% {
left: 0%;
transform: rotateY(0deg);
}
49.5% {
left: 90%;
transform: rotateY(0deg);
}
50.5% {
left: 90%;
transform: rotateY(180deg);
}
100% {
left: 0%;
transform: rotateY(180deg);
}
}
body {
background-color: black;
}
div {
position: absolute;
margin-left: 18%;
margin-top: 3%;
width: 800px;
height: 500px;
border: 5px double #DDDDDD;
border-radius: 1em 1em;
background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
float: left;
position: absolute;
margin: 0px;
top: 20%;
width: 100px;
height: 50px;
transform: scale(1.5, 1.5);
animation-name: fish01;
animation-duration: 10s; /* double of original time */
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
div img:nth-child(2) {
float: left;
position: absolute;
top: 20%;
left: 60%;
}
<section>
<div>
<img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" />
<img src="http://www.pets4homes.co.uk/images/fish_hero.png" />
</div>
</section>
The problem was that you had animation-direction: alternate; in your CSS. To compensate for removing this, you also need to make the img moving to left: 90% being at the 50% mark in the animation, not the 100% mark.
Hope this helps! :)
#keyframes fish01{
0% {
left: 0%;
transform: rotateY(0deg);
}
49% {
transform: rotateY(0deg);
}
50% {
left: 90%;
transform: rotateY(180deg);
}
99% {
transform: rotateY(180deg);
}
100% {
left: 0%;
transform: rotateY(0deg);
}
}
body {
background-color: black;
}
div {
position: absolute;
margin-left: 18%;
margin-top: 3%;
width: 800px;
height: 500px;
border: 5px double #DDDDDD;
border-radius: 1em 1em;
background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
float: left;
position: absolute;
margin: 0px;
top: 20%;
width: 100px;
height: 50px;
transform: scale(1.5, 1.5);
animation-name: fish01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
div img:nth-child(2) {
float: left;
position: absolute;
top: 20%;
left: 60%;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>CSS rotate animation</title>
<link rel="stylesheet" href="Transicion02.css"/>
</head>
<body>
<section>
<div>
<img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png"/>
<img src="http://www.pets4homes.co.uk/images/fish_hero.png"/>
</div>
</section>
</body>
</html>
I have a problem with Blurring and Flickering while css animation in Chrome.
First I have to say, yes i know the small Fix using:
-webkit-backface-visibility: hidden;
But in my case, I dont get it to work.
To Center a Container Im using following code:
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The Width and the Height of this DIV is dynamic. Now the problem:
When this dynamic container has odd-numbered Pixel the text is blurry while any css animation. Just have a look at this fiddle:
https://jsfiddle.net/reuse52p/
When Im adding backface-visiblity, the container is the whole time blurry. Do you have any ideas, how I can fix this?
Sincerely
Try this code. some css hack will remove blur and flickering from it.
Add this properties to remove blur and flickering!
-webkit-perspective: 1000;
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
transform: translateZ(0);
See demo below
$(document).ready(function() {
$(".anim").click(function() {
$(this).toggleClass("bigger");
});
});
.outer {
position: relative;
height: 500px;
width: 500px;
background: #ccc;
-webkit-perspective: 1000;
-webkit-font-smoothing: subpixel-antialiased;
}
.inner {
position: absolute;
width: 300px;
height: 300px;
background: #e5e5e5;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.anim {
width: 100px;
height: 50px;
background: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -25px;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
-webkit-perspective: 1000;
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
transform: translateZ(0);
}
.bigger {
transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<h2>Flickering!</h2>
<div class="anim">Click me</div>
</div>
</div>
Reference
WebKit: Blurry text with css scale + translate3d
Blurry text after using CSS transform: scale(); in Chrome
Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
#nav {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
-webkit-transition: all 0.5s ease-out;
}
.moveto {
top: 0px;
right: 0px;
}
and then I use jQuery's .addClass
You can animate the position (top, bottom, left, right) and then subtract the element's width or height through a CSS transformation.
Consider:
$('.animate').on('click', function(){
$(this).toggleClass("move");
})
.animate {
height: 100px;
width: 100px;
background-color: #c00;
transition: all 1s ease;
position: absolute;
cursor: pointer;
font: 13px/100px sans-serif;
color: white;
text-align: center;
}
/* ↓ just to position things */
.animate.left { left: 0; top: 50%; margin-top: -100px;}
.animate.right { right: 0; top: 50%; }
.animate.top { top: 0; left: 50%; }
.animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}
.animate.left.move {
left: 100%;
transform: translate(-100%, 0);
}
.animate.right.move {
right: 100%;
transform: translate(100%, 0);
}
.animate.top.move {
top: 100%;
transform: translate(0, -100%);
}
.animate.bottom.move {
bottom: 100%;
transform: translate(0, 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>
And then animate depending on the position...
For elements with dynamic width it's possible to use transform: translateX(-100%); to counter the horizontal percentage value. This leads to two possible solutions:
1. Option: moving the element in the entire viewport:
Transition from:
transform: translateX(0);
to
transform: translateX(calc(100vw - 100%));
#viewportPendulum {
position: fixed;
left: 0;
top: 0;
animation: 2s ease-in-out infinite alternate swingViewport;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingViewport {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw - 100%));
}
}
<div id="viewportPendulum">Viewport</div>
2. Option: moving the element in the parent container:
Transition from:
transform: translateX(0);
left: 0;
to
left: 100%;
transform: translateX(-100%);
#parentPendulum {
position: relative;
display: inline-block;
animation: 2s ease-in-out infinite alternate swingParent;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingParent {
from {
transform: translateX(0);
left: 0;
}
to {
left: 100%;
transform: translateX(-100%);
}
}
.wrapper {
padding: 2rem 0;
margin: 2rem 15%;
background: #eee;
}
<div class="wrapper">
<div id="parentPendulum">Parent</div>
</div>
Demo on Codepen
Note: This approach can easily be extended to work for vertical positioning. Visit example here.
This worked for me on Chromium. The % for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it's location.
topleft {
top: 0%;
left: 0%;
}
bottomright {
top: 100%;
left: 100%;
-webkit-transform: translate(-100%,-100%);
}
In more modern browsers (including IE 10+) you can now use calc():
.moveto {
top: 0px;
left: calc(100% - 50px);
}