Been trying to trigger a transition using :hover in a running animation using CSS, in the example below, only the background-color changes on :hover but the transform property is triggered only after an animation stops. How can I trigger the transform: rotate during the animation?
Also, my initial background-color: red seems to fade-in when I reload the page without me explicitly triggering it by :hover. I assume it's caused by the transition-duration, can this be avoided using only CSS?
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.red {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-direction: alternate;
transition-duration: 5s;
transition-property: all;
}
.red:hover {
transform: rotate(180deg);
background-color: teal;
}
#keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<body>
<div class="container">
<div class="red"></div>
</div>
</body>
Transforms do not stack in this way. One way to work around this limitation could be to use a parent element for the rotation transform.
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.red {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-direction: alternate;
transition-duration: 5s;
transition-property: all;
}
.red:hover {
background-color: teal;
}
.wrap {
transition: all 5s;
}
.wrap:hover {
transform: rotate(180deg);
}
#keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<body>
<div class="container">
<div class="wrap">
<div class="red"></div>
</div>
</div>
</body>
Related
In a moving box,
I want to make an animation that turns upside down when I raise the mouse.
I want to implement the movement of the box with the keyframe and designate hover, but it doesn't work.
What should I do?
#www{
background-color: black;
position: absolute;
left: 0;
top: 0;
animation: www 5s infinite;
transition: 1s;
}
#www:hover{
transform: rotate(180deg);
}
#keyframes www{
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {transform: translateX(0vw);}
}
<div class="box" id="www">WWW</div>
You can use a container to have both transformation properties as you can't achieve different transform on same element using different triggers(hover automatic)
Below styles used are for illustration only (to easily understand) you can use according to need and have a transparent background if want
function func() {
document.getElementById("www").style.transform = "rotate(180deg)"
}
#www {
background-color: black;
transition: 1s transform;
animation: www 10s infinite;
width: fit-content;
}
#keyframes www {
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {
transform: translateX(0vw);
}
}
.box1 {
transition: 1s;
background-color: red;
margin-top: 100px;
width: fit-content;
}
.box1:hover {
transform: rotate(180deg)
}
<div class="box" id="www" onclick="func()">
<div class="box1">WWW</div>
</div>
Please see the code below.
.nk-loader-c {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nk-loader-circle {
transform-origin: bottom center;
animation: obj-rotate 3s linear infinite;
height: 36px;
}
.obj-circle {
display: inline-block;
background-color: #6540eb;
height: 20px;
width: 20px;
border-radius: 50%;
transform: scale(0);
animation: obj-grow 1.5s linear infinite;
margin: -5px;
}
.obj-circle:nth-child(1) {
background-color: #3766f3;
animation-delay: 1.5s;
}
.obj-circle:nth-child(2) {
background-color: #603aef;
animation-delay: .75s;
}
.obj-circle:nth-child(3) {
background-color: #2998f6;
animation-delay: .37s;
}
#keyframes obj-rotate {
to{
transform: rotate(360deg);
}
}
#keyframes obj-grow {
50% {
transform: scale(1);
}
}
<div class="nk-loader-c">
<div class="nk-loader-circle">
<div class="obj-circle"></div>
<div class="obj-circle"></div>
<div class="obj-circle"></div>
</div>
</div>
Can anyone help me with this? the rotation of the object circle is not
really 360degrees. Can anyone help me how can I make the rotation
360deg?
But when I tried using two circles the rotation if working on 360degress.
What about this?
.nk-loader-c {
padding-top: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nk-loader-circle {
position:absolute;
transform-origin: bottom center;
animation: obj-rotate 3s linear infinite;
height: 36px;
}
.obj-circle {
display: inline-block;
background-color: #6540eb;
height: 20px;
width: 20px;
border-radius: 50%;
transform: scale(0);
animation: obj-grow 1.5s linear infinite;
margin: -5px;
}
.nk-loader-circle:nth-child(1){
animation-delay: -0.5s;
}
.nk-loader-circle:nth-child(1) .obj-circle{
background-color: #3766f3;
animation-delay: 1.5s;
}
.nk-loader-circle:nth-child(2){
animation-delay: -.25s;
}
.nk-loader-circle:nth-child(2) .obj-circle{
background-color: #603aef;
animation-delay: .75s;
}
.nk-loader-circle:nth-child(3) {
animation-delay: 0s;
}
.nk-loader-circle:nth-child(3) .obj-circle{
background-color: #2998f6;
animation-delay: .37s;
}
#keyframes obj-rotate {
to {
transform: rotate(360deg);
}
}
#keyframes obj-grow {
50% {
transform: scale(1);
}
}
<div class="nk-loader-c">
<div class="nk-loader-circle">
<div class="obj-circle"></div>
</div>
<div class="nk-loader-circle">
<div class="obj-circle"></div>
</div>
<div class="nk-loader-circle">
<div class="obj-circle"></div>
</div>
</div>
</div>
Having problem with hyperlinking a menu item. The menu has webkit animation attached. Inspired from a codepen demo to create a orbiting menu. The orbiting circle menu works fine. Somehow the hyperlinks are not working. Would appreciate if i can pause the webkit animation on menu hover. Point me in the right direction.
Here is the [codepen demo link] (https://codepen.io/aroganz/pen/ZEELqKr)
<div class="outCircle">
<div class="rotate anim1">
<div class="counterrotate">
<div class="inner">Home
</div>
</div>
</div>
<div class="rotate anim2">
<div class="counterrotate">
<div class="inner">Our Team
</div>
</div>
</div>
<div class="rotate anim3">
<div class="counterrotate">
<div class="inner">Our Servicces
</div>
</div>
</div>
<div class="rotate anim4">
<div class="counterrotate">
<div class="inner">Contact
</div>
</div>
</div>
</div>
The CSS Part
.outCircle {
width: 300px;
height: 300px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
}
.rotate {
width: 100%;
height: 100%;
position: absolute; /* add this */
}
.counterrotate {
width: 100px;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: red;
border-radius: 100px;
background-color: red;
display: table-cell;
}
.anim1 {
-webkit-animation: circle1 35s infinite linear;
}
.anim1 .counterrotate {
-webkit-animation: ccircle1 35s infinite linear;
}
.anim2 {
-webkit-animation: circle2 35s infinite linear;
}
.anim2 .counterrotate {
-webkit-animation: ccircle2 35s infinite linear;
}
.anim3 {
-webkit-animation: circle3 35s infinite linear;
}
.anim3 .counterrotate {
-webkit-animation: ccircle3 35s infinite linear;
}
.anim4{
-webkit-animation: circle4 35s infinite linear;
}
.anim4 .counterrotate {
-webkit-animation: ccircle4 35s infinite linear;
}
#-webkit-keyframes circle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(-360deg)
}
}
#-webkit-keyframes circle2 {
from {
-webkit-transform: rotateZ(90deg)
}
to {
-webkit-transform: rotateZ(450deg)
}
}
#-webkit-keyframes ccircle2 {
from {
-webkit-transform: rotateZ(-90deg)
}
to {
-webkit-transform: rotateZ(-450deg)
}
}
#-webkit-keyframes circle3 {
from {
-webkit-transform: rotateZ(180deg)
}
to {
-webkit-transform: rotateZ(540deg)
}
}
#-webkit-keyframes ccircle3 {
from {
-webkit-transform: rotateZ(-180deg)
}
to {
-webkit-transform: rotateZ(-540deg)
}
}
#-webkit-keyframes circle4 {
from {
-webkit-transform: rotateZ(270deg)
}
to {
-webkit-transform: rotateZ(630deg)
}
}
#-webkit-keyframes ccircle4 {
from {
-webkit-transform: rotateZ(-270deg)
}
to {
-webkit-transform: rotateZ(-630deg)
}
}
Would appreciate if i can pause the webkit animation on menu hover.
Since there is lots of different animations on different elements involved here, the easiest way to do this would be something along the lines of
.outCircle:hover * {
animation-play-state: paused !important;
}
When the container element gets hovered, the animation play state for all children gets set to paused, !important added so that it overwrite any states that might be set differently elsewhere.
You can be a bit more specific with the selector though here, since there’s two classes of elements that are animated, so make that
.outCircle:hover .rotate, .outCircle:hover .counterrotate {
animation-play-state: paused !important;
}
I tried making divs as buttons that link to another subpage. I animated them so they rotate in when going on the site. Now I want to make a hover effect that scales the buttons. But it seems like it doesn´t get recognized. When I comment the animaton out it works. Is there a way to have the animation and the hover effect?
Thanks in advance!
.animation-links div {
background: #444;
margin: 10px;
text-align: center;
height: 100px;
transform: rotateY(90deg);
transform-origin: center;
}
#animation-1 {
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
animation-name: animated;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
} animation-delay: 0.5s;
#keyframes animated {
0% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0);
}
}
}
.animation-links div:hover {
transform: scale(1.10);
}
It is because animation-fill-mode: forwards;
If the value for animation-fill-mode is not none then when animation ends it will not apply the css property values.
So I have removed animation-fill-mode: forwards; from #animation-1 style rule and transform: rotateY(90deg); from .animation-links div style rule. Also there were some extra { and style set outside the braces. I have removed those as well.
See the Snippet below:
.animation-links div {
background: #444;
margin: 10px;
text-align: center;
height: 100px;
transform-origin: center;
}
#animation-1 {
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
animation-name: animated;
animation-duration: 1s;
/*animation-fill-mode: forwards;*/
animation-delay: 0.5s;
transition: transform 1s ease;
}
#keyframes animated {
0% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0);
}
}
.animation-links div:hover {
transform: scale(2);
}
<div class="animation-links">
<div id="animation-1">Animation 1</div>
</div>
You can test it here also.
I have a 'bouncing loader' div, in which moves up and down on an infinite loop (see this jsfiddle
However, if I place a button below it, (or anything else for that matter), it will also move in time to the animation effect.
Is there anyway of stopping this button from moving?
I have tried adding margins/padding on both, but they didn't work so I removed them.
the loader html:
<div class="loader" style="float:initial;">
<span></span>
<span></span>
<span></span>
</div>
<br />
<div>
<button id="popupArea">Click here to invoke a popup window</button>
</div>
with the css being:
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
#-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
#-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
As always, any help/advice is welcomed.
Please note, I'm don't know jquery, so would like to avoid it as much as possible (hence i'm using asp MVC)
Just add the following css attribute:
#popupArea {
position:fixed;
top:100px;//you can change the value as you wish
}
Example here.
try like this
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
#-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
#-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
<div class="loader" style="height:100px;">
<span></span>
<span></span>
<span></span>
</div>
<br />
<div>
<button id="popupArea">Click here to invoke a popup window</button>
</div>
Try to put height at loader's div .
.loader {
text-align: center;
height:85px;
}
http://jsfiddle.net/csdtesting/9emc9so9/4/
Simple, just set the height for the span
Set height: 100px; in the loader
.loader {
text-align: center;
height:100px;
}
Here is a DEMO