I have animation with using transform:translate(-100%) and transition, but when i load page my block is moving from 0% to -100%;
in normal condition she have to have transform:translate(-100%) and when checkbox is checked - transform:translate(0%)
It works well but on load is moving from o to -100%
https://katehrybkova.github.io/ETmenu/index.html - link on github-page
https://github.com/katehrybkova/ETmenu - source
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
position: absolute;
transform: translateX(-100%);
transition: 1s;
}
#idishka:checked~.menuBlock {
transform: translateX(0);
}
The animation starts with .menuBlock at left: 0, that's why transform: translateX(-100%) starts fading it to the left.
Maybe you can replace translateX function with left, because you have .menuBlock with fixed width.
This is the final code:
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
transition: 1s;
position: absolute;
left: -400px;
}
#idishka:checked ~ .menuBlock {
left: 0;
}
I don't recommend you using fixed widths (in pixels), for responsivity issues ;)
Related
I made a CSS3 animation, it works well in Firefox and Chrome, but it behaves differently in IE11 and Edge.
I couldn't fix the issue because it's hard to debug CSS3 Animation using IE Developer Tools. This issue also occurs on Edge (But i think my Edge version is outdated so please try to reproduce this issue only in IE11. The fix will probably work on both).
Here is how i want the animation to look (Works on Chrome/Firefox):
Here is how it animates differently on IE11:
Code:
HTML:
<div class="block"></div>
<span>click</span>
CSS:
span {
width: 50px;
height: 50px;
background: red;
font-size: 50px;
}
.block {
position: fixed;
height: 0%;
bottom: 0;
width: 100%;
top: auto;
display: block;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animate-up {
animation-name: overlayEffectUp;
}
#keyframes overlayEffectUp {
0% {
bottom: 0;
top: auto;
height: 0%;
}
35%,
65% {
height: 100%;
}
100% {
bottom: auto;
top: 0;
height: 0%;
}
}
JavaScript (With jQuery):
$('span').on('click', function() {
$('.block').addClass('animate-up')
})
Here is the Demo link: https://jsfiddle.net/zoq9h7xp/3/
Please, any help would be appreciated!
Edge seems to be buggy with position: fixed. Supposedly the switch between top: 0 and top: auto (and same story with the bottom property) causes this behaviour.
If you must maintain the fixed position, you can try to animate with the transform property. Change your rulesets as follow:
#keyframes overlayEffectUp {
0% {
transform: translateY(100%); // totally offscreen
}
35%,
65% {
transform: translateY(0%); // totally on screen from bottom
}
100% {
transform: translateY(-100%); // totally off screen again to top
}
}
.block {
position: fixed;
top:0;
bottom:0;
transform: translateY(100%);
width: 100%;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
Hope this helps.
Cheers, Jeroen
I try to make image gallery using bootstrap and my custom CSS. I want to make if the user hover on the image, the picture will getting bigger on its place. Everything is done by only using css but I have a little problem regarding the grid of my image. When I hover the most right image, the position will be mess. Here is my experiment : http://hanzoclothing.com/lookbook/chapter-iii
CSS:
.lookbook-item{
position: relative !important;
}
.lookbook-item:hover{
z-index: 5;
}
.lookbook-item .thumb{
opacity: 1 !important;
}
.lookbook-item .thumb img{
-webkit-transition: all 1s ease-in-out;
transition: all 0.3s ease-in-out;
}
.lookbook-item .thumb:hover img{
position: absolute;
min-width: 600px;
max-width: 600px;
margin-top: -40px;
margin-left: -50px;
/* top: 200%;
left: 23%;*/
z-index: 6;
}
I'd be tempted to use transform: scale(xxx); for this. It will do exactly what you want without effecting other elements:
.lookbook-item .thumb:hover img {
/* position: absolute; */
/* min-width: 600px; */
/* max-width: 600px; */
/* margin-top: -40px; */
/* margin-left: -50px; */
z-index: 6;
transform: scale(2);
}
If you want to keep the offset you currently have, you could use the following:
transform: scale(2) translate(50px, 40px);
Currently I'm developing a simple website on which a experiment a lot with modern CSS techniques like animations and transition. But after implementing some carefully planned animations, suddenly my body texts aren't selectable anymore. I think some element is masking the text, but I can't find it. If anyone could point me in the right direction it would help me a lot.
You can check the dev version on the-outsiders.nl, below is a snippet of the sass I'm using.
Thx in advance!
.slider {
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: 0;
li {
span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 1;
z-index: -1;
#include animation(0s, 25s, imageAnimation);
}
div {
z-index: 1;
position: absolute;
bottom: 30px;
right: 0px;
min-width: 20em;
text-align: left;
opacity: 1;
color: #fff;
#include animation(0s, 25s, titleAnimation);
}
}
}
.slider,
.slider:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
#include keyframe(imageAnimation) {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; #include transform(scale(1.025)); animation-timing-function: ease-out; }
100% { opacity: 1; #include transform(scale(1.15)); animation-timing-function: ease-out; }
}
#include keyframe(titleAnimation) {
0% { opacity: 0 }
17% { opacity: 1 }
}
slider has z-index: -1; in two places.
Once you take out those two z-index, you should be able to select the bottom text.
I am having a hard time determining what you are asking. But if you are concerned that one control is masking another, you can determine if another element is masking your input by setting the background color of the potential overlaying item to something like bright green. It should then be obvious when something is on top of something else.
I've created a basic 3D cube using CSS and <div>s. However, when it animates, the sides are not "overlapping" properly. It's a bit hard to explain, so see the http://jsfiddle.net/JNCNr/ to see precisely what I mean. I've read through some SO posts, the MDN, and so forth, but I am not quite sure what is causing my issue. I simply want the sides to behave properly when they rotate behind each other.
EDIT: Right now it's working for Chrome only.
Here is some of my CSS:
.container {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
/* for 3d animations */
-webkit-perspective: 800;
}
.box {
/* size */
height: 100px;
width: 100px;
position: absolute;
-webkit-user-select: none;
cursor: move;
/* color */
opacity: 1;
background: -webkit-radial-gradient(#666, #333);
border: 1px solid black;
/* 3d stuff */
-webkit-transform-origin: 50px 50px -50px;
}
.s1 {
-webkit-animation: as1 4s linear infinite;
}
#-webkit-keyframes as1 {
from {
-webkit-transform: rotate3d(0, -1, 0, -270deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
}
}
Thanks~!
Apply backface-visibility: hidden to hide the parts of element that have been rotated to show the backface:
.s1, .s2, .s3, .s4 {
-webkit-backface-visibility: hidden;
}
Updated jsFiddle
I have to elements and I want to animate them seperatly. Element one should play animation one and element two should play animation two.
But when I test it element one plays both animations and element two none.
This is not happening if I start the animation of element two with a delay, but this is no solution...
Here's element one:
#wrapper_splashscreen #logo {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
-webkit-animation: logoIntro 0.5s 1; }
#-webkit-keyframes logoIntro
{
0% {
-webkit-transform: scale(0, 0);
opacity: 0;
}
80% {
-webkit-transform: scale(1.4, 1.4);
}
90% {
-webkit-transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
and here's element two:
#wrapper_splashscreen #menu {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
background: #151515;
-webkit-animation-name: menuIntro 1s 1; }
#-webkit-keyframes menuIntro
{
0%, 30% {
bottom: -40px;
}
100% {
bottom: 0px;
}
}
The logo (element one) is fadeing in and moving down and the menu (element two) is doing nothing.
In the second element you've an error:
-webkit-animation-name: menuIntro 1s 1;
It should be -webkit-animation.
I'm not sure what's the problem with the first element (please add a fiddle/demo), buy maybe setting a transform-origin will help
It seems like the animation becomes buggy when you navigate to the animated element with an anchor. The browser navigates to the element while its moving and the animation gets broken.