I'm trying to create a rotating background using css keyframe animation, but I can't get it to rotate at all. I'm not to sure what I'm getting wrong.
Here's my code:
.main-header {
width: 100%;
Height: 128px;
}
.main-header, background {
position: absolute;
z-index: -1;
top: -1px;
height: 248px;
background-color: #ffffff;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Here is a JSEDIT link as requested: http://jsbin.com/OMeSaGAp/1/edit
Most probably, that is not what you want, but here you got it working in Chrome
fiddle
You missed the webkit in the transform
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
Most probably you want something like that
changed demo (webkit)
CSS
.main-header {
width: 100%;
Height: 128px;
}
.main-header {
position: absolute;
z-index: -1;
top: -1px;
height: 248px;
overflow: hidden;
}
.main-header:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {
-webkit-transform: scale(1.5) rotate(-10deg);
}
to {
-webkit-transform: scale(1.5) rotate(10deg);
}
}
I have displayed the image in a pseudo element that rotates inside the base element. this one has clip enabled, and to have enough image everywhere, I applied a zoom, and limited the degrees of rotation.
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 want to create a div which automatic slides in when calling the webpage and the ability to close it with a X and if not press X automatic closes after 5 sec.
So lets say: from top of webpage slide in and div is 200px width and is 200px height.
How can I create that with css3 transitions?
Follow below code for your slider div using css3:
First add below CSS in your html:
<style>
.slider {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 30px;
-moz-animation-name: dropSlider;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
-webkit-animation-name: dopSlider;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
animation-name: dropSlider;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#-moz-keyframes dropSlider {
0% {
-moz-transform: translateY(-250px);
}
100$ {
-mox-transform: translateY(0);
}
}
#-webkit-keyframes dropSlider {
0% {
-webkit-transform: translateY(-250px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropSlider {
0% {
transform: translateY(-250px);
}
100% {
transform: translateY(0);
}
}
#divSlider.close {
opacity:0;
}
button {
position: absolute;
top: 0px;
right: 0px;
}
</style>
Now, add the below code in your body part:
<div align='center'>
<div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
<button type='button' onclick='closeMe();'>X</button>
<h1>Slider Div</h1>
</div>
</div>
then finally add the below script after the end of the body:
<script>
setTimeout(function() {
document.getElementById('divSlider').className = 'close';
}, 5000);
function closeMe() {
document.getElementById('divSlider').className = 'close';
}
</script>
Finally, your html is ready to execute....
I'm sure this'll help you solve out your issue and if it's does then don't forget to mark my answer... (^_^)
Thanks...
setTimeout(function() {
document.getElementById('divSlider').className = 'close';
}, 5000);
function closeMe() {
document.getElementById('divSlider').className = 'close';
}
.slider {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 30px;
-moz-animation-name: dropSlider;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
-webkit-animation-name: dopSlider;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
animation-name: dropSlider;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#-moz-keyframes dropSlider {
0% {
-moz-transform: translateY(-250px);
}
100$ {
-mox-transform: translateY(0);
}
}
#-webkit-keyframes dropSlider {
0% {
-webkit-transform: translateY(-250px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropSlider {
0% {
transform: translateY(-250px);
}
100% {
transform: translateY(0);
}
}
#divSlider.close {
opacity: 0;
}
button {
position: absolute;
top: 0px;
right: 0px;
}
<div align='center'>
<div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
<button type='button' onclick='closeMe();'>X</button>
<h1>Slider Div</h1>
</div>
</div>
In the following code, I want to have the square shadow appear and rotate at the same time, but the display does not change. Any help is very appreciated.
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
It won't work like this because when you have it set to display:none; there's nothing to hover so the hover state never gets fired. You need to use only opacity to hide it rather than display:none;
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity:0;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
opacity: 0.2;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't hover a non-displayed element. There are a few solutions here, just as making the shadow a child of the test div.
Or, using a + CSS selector. In either case, the hover listener is on the visible element:
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't animate "Display". If you want to fade in the box, have
display:block;
opacity:0;
and in your animations add
opacity:1;
this will fade in the box as it rotates.
You cannot hover an element not displayed like #shadow (with display:none), but you have to hover #test and apply the css rule to the sibiling next to #test, that is #shadow (using + selector)
#test:hover + #shadow
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow{
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
I'm looking to animate some panels without any JS. The effect I want to create is similar to this: http://www.sequence.co.uk/case-studies/
I've got the animation about right and I can see in fire-bug that each li has its own delay using nth-child BUT the staggered delay isn't working.
See code below:
http://codepen.io/bakers37/pen/KwoNvB
#-webkit-keyframes flip {
0% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
}
#keyframes flip {
0% {
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
li
{
width: 200px;
height: 200px;
display: inline-block;
background: #ccc;
margin: 10px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
// Loop through the items and add some delay.
#for $i from 1 through 20 {
&:nth-child(#{$i}) {
#include transition-delay(1s * $i);
}
}
}
Turns out I was using 'transition-delay' and what I needed was 'animation-delay'. Now works. See http://codepen.io/bakers37/pen/myKPjV
#-webkit-keyframes flip {
0% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
}
#keyframes flip {
0% {
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
li
{
width: 200px;
height: 200px;
display: inline-block;
background: #ccc;
margin: 10px;
opacity: 0.5;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
// Loop through the items and add some delay.
#for $i from 1 through 20 {
&:nth-child(#{$i}) {
-webkit-animation-delay: (0.2s * $i);
-moz-animation-delay: (0.2s * $i);
animation-delay: (0.2s * $i);
}
}
}
Please refer to this fiddle: http://jsfiddle.net/eQegA/3/
<div class="spinner"></div>
.spinner {
width: 100px;
height: 100px;
border: 50px solid blue;
/*border-top-color: #fff;
border-bottom-color: #fff;*/ /* commented out to see the wobble better */
border-radius: 200px;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
In Google Chrome the rotation is stable, however for some reason in IE11 there is a noticable "wobble" of the circle as it rotates.
Any ideas why it wobbles so? Is there any way to fix it in IE11?
For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.
.spinner {
display:block;
width: 200px;
height: 200px;
border-radius: 100%;
background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
background-size:100%;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
See:
http://jsfiddle.net/eQegA/26/