/// Create Button Arrows and Animations \\\\
.buttons {
// this sets the default styling for both buttons
background-color: transparent;
/// try changing to grey
//try adding opacity:.5
border: solid green;
border-width: 0 6px 6px 0;
// change the border width to make the arrows thicker
display: inline-block;
padding: 3px;
animation-name: button-anim;
// this controls the animation
animation-duration: 3s;
// this sets the animation duration
animation-fill-mode: forwards;
// this sets animation directions
width: 50px;
//button width
height: 50px;
//button height
}
.buttons:hover {
// this sets the hover state of buttons
background-color: transparent;
border: solid green;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
}
.buttons:active {
// this sets the active state of buttons
background-color: transparent;
border: solid black;
// the border here is black instead of green
border-width: 0 10px 10px 0;
// the border width is also thicker
display: inline-block;
padding: 3px;
}
.buttons:visited {
//this sets the visisted or pressed state of the buttons
background-color: transparent;
border: solid black;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 3px;
}
.right_elements {
// this class rotates right side elements and sets their animation
transform: rotate(-45deg);
//rotation
-webkit-transform: rotate(-45deg);
animation-name: right-anim;
//animation name
animation-duration: 3s;
//duration
animation-fill-mode: forwards;
//direction
postition: absolute;
//sets position style to absolute
animation-delay: 2s;
//sets a load delay
right: -100px;
//sets initial position off screen
}
.left_elements {
//sets the rotationa and animation of left side elements
transform: rotate(135deg);
//sets rotation
-webkit-transform: rotate(135deg);
animation-name: left-anim;
// sets animation name
animation-duration: 3s;
//duration
animation-fill-mode: forwards;
//direction
postition: absolute;
//position
animation-delay: 2s;
//delay
left: -100px;
//sets initial position off screen
}
@keyframes button-anim {
from{
opacity:0;
//sets initial fade state
}
to{
//transform: rotate(45deg) translate(7.3em) rotate(-45deg);
opacity:.75;
//end state
}
};
@keyframes left-anim {
100% { left: 0; }
//slide into position 0
}
@keyframes right-anim {
100% { right: 0; }
//slide into position 0
}
/* --------------------------------------------- */