I try to code a little rock-paper-scissors based game and used the CSS/JS-code from this youtube tutorial to create neon buttons with a snake animation around the edges of the button.
https://youtu.be/3RRgVHd2TXQ
I then softened the edges of the buttons using "border-radius: 15px" - but the reflection has still sharp corners.
How can I solve this?
Also the snake-animation to shine around the edges of the button does not work :( - would be great to know why!?
Try the game: https://bamory.com/?hotlink=FARTWAR (click link to start a game-session and invite another player with the session-code appearing on top of the screen)
CODE:
html{
text-align: center;
}
}
body.chapter2 {
color: yellow;
}
input {
margin: 10px;
height: 50px;
width: 90%;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050801;
flex-direction: column;
}
.button
{
border-radius: 15px;
position: relative;
display: inline-block;
padding: 10px 15px;
margin: 10px 10px;
color: #03e9f4;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
width: 25%;
}
.button:nth-child(1)
{
filter: hue-rotate(290deg);
}
.button:nth-child(3)
{
filter: hue-rotate(110deg);
}
.button:hover
{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.button span
{
position: absolute;
display: block;
}
.button span:nth-child(1)
{
top: 0;
left: 0;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
#keyframes animate1
{
0%
{
left: -100%;
}
50%, 100%
{
left: 100%;
}
}
.button span:nth-child(2)
{
top: -100px;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2
{
0%
{
top: -100%;
}
50%, 100%
{
top: 100%;
}
}
.button span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
#keyframes animate3
{
0%
{
right: -100%;
}
50%, 100%
{
right: 100%;
}
}
.button span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4
{
0%
{
bottom: -100%;
}
50%, 100%
{
bottom: 100%;
}
}
Thanks for your help! (it´s my first time using JS / stackoverflow - please forgive me if I inserted too much code or did other mistakes!)
how about give up box-reflect and use transform. take look at this:
css box-reflect alternative for older browser
it's more messy but why not more to learn
Related
I have the following code:
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
On my end, the output is looking like this:
This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting left: calc(52.3% - 1em) !important;. On my end, this property is whats making it align perfectly on top of the text.
The problem is that when I zoom out, I'm getting this output:
As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the left: calc(52.3% - 1em) !important; property I'm pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on 100% zoom. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?
That's a really cool animation!
To perfectly center it, I made the following changes:
This was being used to center the div, left: calc(52.3% - 1em) !important;; I have removed this completely and have used a simple <center> tag to center it.
The animation code itself then runs directly right of center (which is off-center). You can fix this by moving an element to the left of itself by 50% of its own width with translateX(-50%).
Of course, you can't actually use 50%, because a square box, rotated on its side, increases its width by a factor of about 45%, which means we need to translateY not by 50%, but by 66%.
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
margin: auto;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg) translateX(-66%);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
}
<div id="containerScroll">
<center>
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</center>
</div>
<div style="border:1px solid black;">
<center>•<br>
This dot is perfectly centered.
</center>
</div>
Without a full snippit that allows one to fully recreate your issue, I can only attempt to recreate it using the code you have.
You could place the my-story and containerScroll elements within the section title together. Then make the containerScroll position absolute change the display to flex. Make its top position 0 and declare the width 100% and height 10em or what ever you wish its height to be, just make sure the my-story element has the same top margin set in its css as that of your height from the containerScroll.
I have tested this and when I ZOOM in or out using CNTL + MOUSE WHEEL there is no displacement of the two elements in reference to each other.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--top-dis: 10em; /* use variable so only change once in dynamic locations */
}
body {
height: 2000px;
}
section {
padding: 60px 0;
overflow: hidden;
}
#containerScroll {
position: absolute;
display: flex;
top: 0%;
background-color: #ddd;
width: 100%;
height: var(--top-dis);
}
.section-title {
text-align: center;
padding-bottom: 30px;
margin-top: var(--top-dis);
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
.first-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div class="section-title">
<h2>My Story</h2>
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
</div>
On the CSS just add this property to the #containerScroll
position:
fixed;
left: 50%;
top: 90%; transform: translate(-50%, -50%);
function navigation(id) {
switch (id) {
case 'btn4':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
case 'btn5':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
}
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color: #122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border: 0.2rem solid #64ef65;
border-radius: 35px;
background: linear-gradient(to bottom, #53D853 0%, #0F860F 100%);
}
input[type="checkbox"]:checked+label::before {
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked+label::after,
input:checked+label span {
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1" onclick="navigation(this.id);">
<input type="checkbox" id="defaultBtn">
<label for="defaultBtn"><span><strong>Access</strong></span>
</label>
</div>
i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue. i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue.
With simple trick : use <a> tag
onclick="setTimeout('animRedirect()', 250);" give in checkbox onclick
I add a tag before checkbox and add url
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
------------------Add here check box---------------------------
</a>
I fixed this problem in codepen : https://codepen.io/Rayeesac/pen/ExKKPZe
function animRedirect(){
document.getElementById("reDirect").click();
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color:#122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border:0.2rem solid #64ef65;
border-radius: 35px;
background:linear-gradient(to bottom,#53D853 0%,#0F860F 100%);
}
input[type="checkbox"]:checked + label::before{
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked + label::after,
input:checked + label span{
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#reDirect{
outline: none;
width: 100%;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1">
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
<input type="checkbox" id="defaultBtn" onclick="setTimeout('animRedirect()', 250)">
<label for="defaultBtn">
<span><strong>Access</strong></span>
</label>
</a>
</div>
I'm trying to create a sidebar menu with animations and trying to do as much as possible with css only. If it's not possible, JS / JQuery is ok as well.
My problem is, I've got a <span></span> element with two background images and I wanna have different animation behaviours for them. The first one should rotate and increase it's size according to the span's size, the second one should NOT rotate and stay with the same size as before, but should only appear after the animation has finished.
Is it possible to have kompletely different animations on one element for each background image? If yes, how?
Here's my code so far:
The list is done with an unordered list, each <li></li> should contain one menu-item
<ul>
<li>
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</li>
<li><li>
</ul>
Some CSS for it with animation keyframes
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("hexagon.svg"), url("mars.png");
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
#keyframes menuAnimation {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
And a Fiddle
And that's how it should look like after the animation has finished (the planet image and link text should only be visible after the animation has finished)
Do you mean something like this?
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
position: relative;
}
.menu-item::before {
content: "";
background-color: green;
background-image: url("hexagon.svg"); /*added bg color because of the missing image*/
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
width: 30px;
height: 30px;
transition: all 0.5s ease;
}
.menu-item::after {
content: "";
background-color: red;
background-image: url("mars.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0s 0.5s ease;
}
.menu-item:hover::before {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
width: 50px;
height: 50px;
transform: rotate(210deg);
}
.menu-item:hover::after {
opacity: 1;
}
https://codepen.io/zothynine/pen/GQQdLp
And idea is to split the element into two element using a pseudo element and then you can animate both of them separately and simultaneously:
body {
background: black;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("https://openclipart.org/image/2400px/svg_to_png/247374/Mars.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
.menu-item:before {
content:"";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index:1;
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ4NS42ODggNDg1LjY4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg1LjY4OCA0ODUuNjg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTM2NC4yNjksNDUzLjE1NUgxMjEuNDE2TDAsMjQyLjg0NEwxMjEuNDE2LDMyLjUzM2gyNDIuODUzbDEyMS40MTksMjEwLjMxMkwzNjQuMjY5LDQ1My4xNTV6IE0xMzEuOTA1LDQzNC45OTdoMjIxLjg3OCAgICBsMTEwLjkzOS0xOTIuMTUyTDM1My43ODMsNTAuNjkxSDEzMS45MDVMMjAuOTY2LDI0Mi44NDRMMTMxLjkwNSw0MzQuOTk3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: anime1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
.menu-item:hover::before {
animation-name: anime2;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes anime1 {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
#keyframes anime2 {
from {
transform: rotate(0deg);
opacity:0;
}
to {
transform: rotate(-210deg);
opacity:1;
}
}
<div class="menu-item-wrapper">
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</div>
I'm looking to move my spinner div upwards. Whether it's negative or positive values to move the circle to have it center on the img. It works on my CodePen but not on my Webpage. I read about some possible solutions like adding display: inline-block / display: block and overflow: hidden but they don't seem to work with my code. Why would code that works on Codepen not work on my web page?
.bodyImage1 {
float: right;
margin-right: -10%;
width: 250px;
}
.container {
position: relative;
}
/*Advance animation*/
.connector3 {
position: absolute;
display: inline-block;
margin-top: 360px;
width: 0;
height: 2px;
animation: drawConnector 0.7s;
animation-fill-mode: forwards;
background: linear-gradient(to right, #0083f5 15%, #f57300 105%);
}
.spinner1 {
align-items: center;
border: .3em solid transparent;
border-top: .3em solid #f57300;
border-right: .3em solid #f57300;
border-radius: 100%;
display: flex;
justify-content: center;
}
.spinnerOut {
animation: spinnerOne 3s linear infinite;
margin-top: -50%;
margin-left: 150%;
height: 3em;
width: 3em;
}
.spinnerMid {
animation: spinnerOne 5s linear infinite;
height: 2.4em;
width: 2.4em;
}
.spinnerInn {
animation: spinnerOne 5s linear infinite;
height: 1.8em;
width: 1.8em;
}
#keyframes spinnerOne {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
<div class="connector3 block-anim invis">
<div class="spinner1 spinnerOut invis">
<div class="spinner1 spinnerMid">
<div class="spinner1 spinnerInn"></div>
</div>
</div>
</div>
There is a margin-top: important on the spinner on your site. Changing it moves the spinner around.
Site.css, prettified, line 27301
.spinnerOut {
animation: spinnerOne 3s linear infinite;
margin-top: -225px !important;
margin-left: 150%;
height: 3em;
width: 3em;
}
i have created an two animation with css https://codepen.io/anon/pen/yOqxdq html an css
<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg">
#keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
}
#keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;
}
#show-item{
position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
}
#show-item img{
border: 4px solid black;
}
a#closeShow{
position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;
}
the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down
Try position: fixed; for #show.
DEMO: FIDDLE