I am working on a little CSS3 menu.
Live example here: http://jsfiddle.net/e592S/
(the code is full is very long)
/*Fifth Box*/
#-webkit-keyframes myFifth {
0% {
right: 300px;
top: 13px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
right: 300px;
top: 63px;
opacity: 1;
}
}
#box.box5 {
top: 113px;
}
#littlebox5 {
top: 053px;
position: relative;
}
#bothcontaine5:hover ~ .box5 {
-webkit-transition: all 0s;
right: 300px;
top: 63px;
-webkit-animation: myFifth .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
background: #909090;
right: 300px;
-webkit-animation-fill-mode: initial;
}
#bothcontainer5:hover .littlebox-sentence {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0F2F9), to(#84CEFB));
}
#bothcontainer5:hover .triangle {
border-right: 20px solid #909090;
}
the problem is that the fourth and the fifth doesn't work, (the code is completly the same). the first second third boxes works fine.
My quastion is how can I solve this problem so all the boxes will work?
Wish for help. Thank
didn't quite figure what the problem was but as #rob said you had, and maybe still have html errors, like multiple id's, when id's must be unique in the DOM, also for your own sanity when trying to debug you should try to DRY in your code
the same animation can be applied to all the boxes, you don't have to repeat it for example.
What i did was refactor your code step by step starting with the id's
<div class="box3 box">
corrected code : http://jsfiddle.net/e592S/1/
An 'id' must be unique to one element on a page. Did not test to see if this is the problem. See if making that a 'class' name solves it.
Related
I am having a peculiar issue with a page in which an animated background item at times overlaps over the element in front.
I have seen this happen only on the Samsung Internet Browser (v13.2.1.70) so far.
I can't replicate it on chrome for example (I didn't test many other browsers either).
Here's a codepen of the issue: https://codepen.io/antizio/pen/qBqbqVX.
HTML
<div id="scene">
<div id="bg"></div>
<div id="card"></div>
</div>
CSS
#scene {
width: 500px;
height: 500px;
background: lightgreen;
}
#bg {
position: absolute;
left: 100px;
top: 260px;
width: 100px;
height: 100px;
background: red;
z-index: 10;
}
#card {
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(rgba(140, 193, 63, 0.5) 0%, #138849 70%);
transform: scale3d(0,0,1);
animation: scaleup infinite ease-in 2s;
}
#keyframes scaleup {
from {
transform: scale3d(0, 0, 1);
}
to {
transform: scale3d(1,1,1);
}
}
I have seen it sometimes behaving correctly sometimes overlapping, all just by changing the scrolling position of the page :/
I managed to fix the issue by adding an "empty" transform to the foreground element, however that's not ideal. I based this on remnants of browser behaviors from a long time ago.
Does anybody have any insight on this? Why does this happen? Is there a better way to fix this?
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
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 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 ;)
Not quite a pulse animation -- but somewhat similar (not radial, but linear) -- I am trying to create the effect of sort of a lens flare if you turn a piece of glass and see a band of light swipe across it, in CSS. So say you have a regular background image, or a seamless repeating background image, in CSS. Now you want to animate across that image a rectangular band of light that is sort of a "fade-in ... full light ... fade-out" gradient of white light. So you have a linear-gradient sort of like transparent, semi-transparent-white, white, semi-transparent-white, transparent that flows across the background image (seamless/repeating background image, or regular background image), repeatedly flowing across like it was a pool of water in constant motion.
Wondering if this sort of thing is possible in CSS, and how to do it.
Maybe it is simply an animated linear-gradient mask (which I am not familiar with but have heard of). Not sure.
Basically animating a semitransparent linear gradient like this (just the line part, and imagine it was a simple rectangle).
Are you looking for something like below:
body {
margin:0;
height:100vh;
background:
linear-gradient(to right,transparent 33%,white,transparent 66%),
url(https://picsum.photos/id/10/800/800) center;
background-size:300% 100%,cover;
animation:change 2s linear infinite;
}
#keyframes change {
from { /*Use "to" to change the direction */
background-position:right,center;
}
}
html {
background:#fff;
}
Related to get more details about the calculation:Using percentage values with background-position on a linear gradient
NOt sure if this is what you are looking for. Here it is a shot!
.ripple{
width: 50px;
height: 50px;
display: block;
position: relative;
background-color: #00ccff;
border-radius: 100%;
opacity: 0.5;
}
.ripple:before, .ripple:after{
content: '\0020';
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
border: 2px solid #0088ee;
transform: translate(-50%, -50%);
}
.ripple:before{
animation: ripple-one 2.5s infinite;
}
.ripple:after{
animation: ripple-one 3.5s infinite;
}
#keyframes ripple-one{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
#keyframes ripple-two{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
<label class="ripple"></label>