I am trying to make a box slide in from the left of my page while in the viewport, however it's making my page too wide and I can't get it to reverse once out of the viewport once I've scrolled past it. This is what I have:
.box {
background: #2db34a;
border-radius: 6px;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
width: 95px;
margin-top: 500px;
}
#slide {
position: absolute;
right: -100px;
width: 100px;
height: 100px;
background: blue;
overflow: hidden;
animation: slide 0.5s forwards;
animation-delay: 1s
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
#-webkit-keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); }
}
#keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
#-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
#keyframes moveFromRight {
from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
</style>
</head>
<body>
<div id="slide" class="box">Box</div>
</body>
</html>
I can't use any plug-ins to do this either.
Related
I have a modal sliding up fine in React using keyframes. I want it to slide down when closing. The slide up is triggered by a state and I am trying to trigger the slide down by setting the class to happen when the user clicks to close the button.
Not sure how to achieve this with keyframes.
Here is my code:
JSX
<div
className={classnames(styles.modal, {
[styles.toDisplayModal]: showModal,
[styles.toCloseModal]: closeModal,
})}
>
<div className={styles.container}>
<CloseButton onClick={closeModal} />
<div> text </div>
</div>
</div>
CSS modules & Key frames
.toDisplayModal{
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
animation: slideup 0.3s;
}
.toCloseModal {
animation: slidedown 0.3s;
}
#keyframes slideup {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}
#keyframes slidedown {
100% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-in;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-out;
}
0% {
transform: translateY(400px);
animation-timing-function: ease-in;
}
}
You need to add animation-fill-mode: forwards;.
.toDisplayModal{
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
border: 1px solid red;
animation: slidedown 0.3s 1;
animation-fill-mode: forwards;
}
#keyframes slidedown {
0% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(10px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(20px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(400px);
animation-timing-function: ease-in;
}
}
<div class="toDisplayModal">
Modal
</div>
the first part of .toDisplayModal needs to be put inside .modal because this is the part responsible for showing the modal.
{
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
}
because you want the modal to be shown when it slides down.
I need when last child (yellow square) animation ends, it starts on red square again.
I tried make for each square different animation, but that didn't work properly.
Also i tried to make infinite animation, but i want to make animation where first square translate to scale down, then up, then second square translate to scale down, then up, etc..., but with infinite animation it won't work even if i make higher delays.
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper,
.lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1) {
background: #e03318;
/* RED */
}
.upper:nth-child(2) {
background: #0daa34;
/* GREEN */
}
.lower:nth-child(1) {
background: #1662dd;
/* BLUE */
}
.lower:nth-child(2) {
background: #d1b608;
/* YELLOW */
}
.upper:nth-child(1) {
animation-delay: .5s;
}
.upper:nth-child(2) {
animation-delay: 1s;
}
.lower:nth-child(1) {
animation-delay: 1.5s;
}
.lower:nth-child(2) {
animation-delay: 2s;
}
#-webkit-keyframes scale {
50% {
transform: scale(0.2);
}
100% {
transform: scale(1);
}
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
This can be done with different animations for each rectangle:
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper, .lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1){
background: #e03318; /* RED */
}
.upper:nth-child(2){
background: #0daa34; /* GREEN */
}
.lower:nth-child(1){
background: #1662dd; /* BLUE */
}
.lower:nth-child(2){
background: #d1b608; /* YELLOW */
}
.upper:nth-child(1) {
animation: scale-1 2s infinite;
}
.upper:nth-child(2) {
animation: scale-2 2s infinite;
}
.lower:nth-child(1) {
animation: scale-3 2s infinite;
}
.lower:nth-child(2) {
animation: scale-4 2s infinite;
}
#-webkit-keyframes scale {
50% { transform: scale(0.2); }
100% { transform: scale(1); }
}
#keyframes scale-1 {
0% { transform: scale(1); }
12.5% { transform: scale(0.2); }
25% { transform: scale(1); }
}
#keyframes scale-2 {
25% { transform: scale(1); }
37.5% { transform: scale(0.2); }
50% { transform: scale(1); }
}
#keyframes scale-3 {
50% { transform: scale(1); }
62.5% { transform: scale(0.2); }
75% { transform: scale(1); }
}
#keyframes scale-4 {
75% { transform: scale(1); }
87.5% { transform: scale(0.2); }
100% { transform: scale(1); }
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
I have a pulsating css3 effect on a div, and I'd like it to have a hover effect that seamlessly blends with the pulse, I have a near finished JFiddle here:
https://jsfiddle.net/jnz7yfg0/
It's nearly there, but it's jerky when you hover over it, any ideas to make the animation smoother?
Many thanks!
Code here:
.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#-webkit-keyframes pulsate {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}
.orb {
-webkit-animation: pulsate 2s infinite;
}
.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}
#-webkit-keyframes pulsatehover {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}
As far as I know, there is no way in CSS to chain or merge 2 animations.
You can however get the effect that you want changing the way it works
.container {
width: 80px;
height: 80px;
margin: 100px;
border: solid red 1px;
position: relative;
perspective: 800px;
transition: perspective 2s;
}
.container:hover {
perspective: 400px;
}
.obj {
position: absolute;
width: 100%;
height: 100%;
background: lightblue;
border-radius: 50%;
-webkit-animation: pulse 1s infinite alternate;
animation: pulse 1s infinite alternate;
}
#-webkit-keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
#keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
<div class="container">
<div class="obj">
</div>
</div>
The trick is to make the animation change the z position of the element.
Then , the zoom effect is achieved with the perspective property (in the parent).
A lower pespective makes the effect of the transform bigger. Notice that the animation is always the same, it's the visual effect that changes.
Also, the perspective is animatable, so you can make the transition smooth
I've tried many different ways to add text to this keyframe animation, but the problem is that it messes up one of the animations when I include the div containing the text. Ideally, I want the text to be center and top or center and top left, but when I get it there, it throws off the last span in the animation. How can I edit the class waitingtext so that it doesn't interfere with the animation?
Site where I got the css
HTML
<div class="main-loading" ng-show="mainloading">
<div class="waitingtext">My text</div>
<span class="main-loading"></span><!--
--><span></span><!--
--><span></span><!--
--><span></span><!--
--><span></span>
</div>
CSS
.waitingtext {
color:#FFF;
position: absolute;
z-index: -1;
line-height: 60px!important;
float: left;
margin-top: 5px;
}
div.main-loading
{
background: #1b7817;
opacity:.9;
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
text-align: center;
border:1px solid #dcdcdc;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; padding-left: 5px
}
div.main-loading
{
position: absolute;
height: 300px;
top: 50%;
left: 50%;
line-height: 300px;
text-align: center;
clear: both;
}
.main-loading span
{
display: inline-block;
width: 10px;
height: 10px;
margin: 145px 3px 0;
background: rgba(255,255,255,0.25);
border-radius: 50%;
transform: translateY(0);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
animation: wave 2s infinite ease-in-out;
-moz-animation: wave 2s infinite ease-in-out;
-webkit-animation: wave 2s infinite ease-in-out;
}
#keyframes wave
{
0%, 60%, 100%
{
background: rgba(255,255,255,0.25);
transform: translateY(0);
-moz-transform: translateY(0);
}
20%
{
background: rgba(255,255,255,0.75);
transform: translateY(13px);
-moz-transform: translateY(13px);
}
40%
{
background: rgba(255,255,255,0.75);
transform: translateY(-13px);
-moz-transform: translateY(-13px);
}
}
#-webkit-keyframes wave
{
0%, 60%, 100%
{
background: rgba(255,255,255,0.25);
transform: translateY(0);
-webkit-transform: translateY(0);
}
20%
{
background: rgba(255,255,255,0.75);
transform: translateY(13px);
-webkit-transform: translateY(13px);
}
40%
{
background: rgba(255,255,255,0.75);
transform: translateY(-13px);
-webkit-transform: translateY(-13px);
}
}
.main-loading span:nth-child(1)
{
animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.main-loading span:nth-child(2)
{
animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
.main-loading span:nth-child(3)
{
animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.main-loading span:nth-child(4)
{
animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.main-loading span:nth-child(5)
{
animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
This has nothing to do with positioning but everything to do with your CSS selectors
:nth-child() (what you were using) counts all of the children of the parent, including the div you added. What you need is nth-of-type(), which only counts the spans
Demo
So I want to hover over a Box and have it activate another div with easing effects. You can see below the .images{} has a 0s infinite scroll, and then .box:hover > .images{} is when I change the 0s to 10s to start the slideshow.
HTML:
<div class="slideshow">
<div class="images"></div>
<div class="box"></div>
</div>
CSS:
.slideshow {
position: relative;
overflow: hidden;
height: 220px;
width: 100%;
}
.box {
width:100px;
height:100px;
position: absolute;
left: 0;
top: 0;
background-color: #333;
}
.images {
background: url('http://jamesebeling.com/testing/jamesebeling/wp-content/uploads/2013/08/buildings.png');
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-animation: slideshow 0s linear infinite;
-moz-animation: slideshow 0s linear infinite;
}
#-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
#moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
/* Hey browser, use your GPU */
-webkit-transform: translate3d(0, 0, 0);
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200%);
}
}
#-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-200%);
}
}
.box:hover > .images {
.images {
background: url('http://jamesebeling.com/testing/jamesebeling/wp-content/uploads/2013/08/buildings.png');
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-animation: slideshow 10s linear infinite;
-moz-animation: slideshow 10s linear infinite;
}
#-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
#moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
/* Hey browser, use your GPU */
-webkit-transform: translate3d(0, 0, 0);
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200%);
}
}
#-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-200%);
}
}
If you change your HTML to include the box class before the images class, you can use the adjacent selector to select the .images when it's preceded by .box:hover:
.box:hover + .images { ... }
Working demo.
I also added z-index: 1 to .box so it sits on top of the images element.