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.
Related
I have made an animation in which the image floats.
But the image seems to be vibrating when reaching the end.
Here is the website where the image is link
This is the CSS if the div wrapping the img
.newImg {
position: relative;
width: 472px;
height: 414px;
animation-name: updown;
animation-duration: 5s;
/* animation-delay: 1.5s; */
animation-iteration-count: infinite;
transition-timing-function: ease-in-out;
}
#keyframes updown {
0% {
top: 0px;
}
25% {
top: 8px;
}
50% {
top: 0px;
}
75% {
top: 8px;
}
100% {
top: 0px;
;
}
}
The vibration you see because of the top property. Try using translateY() instead. It will perform faster, animate smoother, and won't affect the layout.
#keyframes updown {
0% {
transform: translateY(0);
}
25% {
transform: translateY(8px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(8px);
}
100% {
transform: translateY(0);
}
}
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 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.
I'm trying to get a bouncing mouse animation to work on my website.
The exact same code works on another website, whereas on mine it just doesn't do anything.
Here's the css:
.mouse {
display: block;
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 32px;
color: #fff;
z-index:9999;
position: absolute;
color: #e8e8e8;;
bottom: 240px;
}
.mouse i {
-webkit-animation: todown 1.2s infinite linear;
transition: all 0.3s ease-in-out;
}
The HTML:
<a href="#x11" class="mouse">
<i class="fa fa-angle-double-down icon-option"></i>
</a>
On this website you can see the scrolldown icon I'm trying to create: http://noxxar.com/demo/uralco/
If you want to use CSS animations you need to define #keyframes.
Luckily the CSS on the theme you linked isn't minified or anything, so you can just copy/paste the parts you want to recreate.
Since Firefox 15 the -moz vendor prefix isn't needed but Chrome and other Webkit Browser still need -webkit-animation: http://caniuse.com/#feat=css-animation
CSS:
#to-slider-scrollto i {
-webkit-animation: todown 1.2s infinite linear;
animation: todown 1.2s infinite linear;
}
#to-slider-scrollto i:hover {
-webkit-animation: none;
animation: none;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
10% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
50% {
-webkit-transform: translateY(0);
opacity: 1;
}
90% {
-webkit-transform: translateY(15px);
opacity: 0;
}
100% {
-webkit-transform: translateY(15px);
opacity: 0;
}
}
#keyframes todown {
0% {
transform: translateY(-15px);
opacity: 0;
}
10% {
transform: translateY(-15px);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
90% {
transform: translateY(15px);
opacity: 0;
}
100% {
transform: translateY(15px);
opacity: 0;
}
}
Working codepen demo with only the needed CSS
Check out cross browser compatibility
.mouse i {
-webkit-animation: todown 1.2s linear infinite;
animation: todown 1.2s linear infinite;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
#keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo