I made a button animation with CSS. If the cursor is hover at the button, the button will shrink, and when its not, its gonna grow. However, when you hover at the button, it keeps playing the animation after 2 seconds. Can you help me fix that?
button{
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
animation: goForward;
animation-play-state: running;
animation-iteration-count: 1;
animation-duration: 2s;
}
button:hover{
animation: goBack;
animation-play-state: running;
animation-duration: 2s;
animation-iteration-count: 1;
}
#keyframes goBack{
from{transform: scale(1)}
to{transform: scale(0.72)}
}
#keyframes goForward{
from{transform: scale(0.72)}
to{transform: scale(1)}
}
Better and simple approach is to use transition than animation.
button {
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
transform: scale(1);
transition: transform ease 2s;
}
button:hover {
transform: scale(0.72);
}
<button>Click Me</button>
Related
I have tried to make an animation using CSS keyframes, but the design is breaking. How can I make it responsive without writing media queries, as it's just a simple animation code?
div {
font-family: "Comic Sans MS", sans-serif;
margin-left: 200px;
margin-top: 200px;
}
span {
color: white;
font-size: 35px;
padding: 14px 25px;
margin: 5px;
border-radius: 10px;
display: inline-block;
animation: move 0.8s infinite linear;
}
#keyframes move {
0% {
transform: translateY(0px);
opacity: 1.0;
}
50% {
transform: translateY(-50px);
opacity: 0.5;
}
100% {
transform: translateY(0px);
opacity: 1.0;
}
}
span:nth-child(1) {
animation-delay: 0.1s;
background-color: red;
box-shadow: 5px 5px 0 black;
}
span:nth-child(2) {
animation-delay: 0.2s;
background-color: blue;
box-shadow: 5px 5px 0 black;
}
span:nth-child(3) {
animation-delay: 0.3s;
background-color: green;
box-shadow: 5px 5px 0 black;
}
span:nth-child(4) {
animation-delay: 0.4s;
background-color: orangered;
box-shadow: 5px 5px 0 black;
}
span:nth-child(5) {
animation-delay: 0.5s;
background-color: springgreen;
box-shadow: 5px 5px 0 black;
}
span:nth-child(6) {
animation-delay: 0.6s;
background-color: blueviolet;
box-shadow: 5px 5px 0 black;
}
span:nth-child(7) {
animation-delay: 0.7s;
background-color: purple;
box-shadow: 5px 5px 0 black;
}
<div>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</div>
Without using a media query, you are limited to what you can do, but in this example, I've removed your set margin-left value and used a percentage instead and made the containing div a percentage width. I've also made the parent div a flex container - this will make sure things have a harder time wrapping on smaller screens.
I then used vw units for the font-size, so it will scale with the window width. Also the padding on the boxes needs to be set to percentages. You can play with it here:
https://jsfiddle.net/disinfor/s5hkyr2f/3/
div {
font-family: "Comic Sans MS", sans-serif;
margin: 200px auto 0;
width: 90%;
display: flex;
justify-content: center;
}
span {
color: white;
font-size: 4vw;
padding: 2% 3%;
margin: 5px;
border-radius: 10px;
display: inline-block;
animation: move 0.8s infinite linear;
}
#keyframes move {
0% {
transform: translateY(0px);
opacity: 1.0;
}
50% {
transform: translateY(-50px);
opacity: 0.5;
}
100% {
transform: translateY(0px);
opacity: 1.0;
}
}
span:nth-child(1) {
animation-delay: 0.1s;
background-color: red;
box-shadow: 5px 5px 0 black;
}
span:nth-child(2) {
animation-delay: 0.2s;
background-color: blue;
box-shadow: 5px 5px 0 black;
}
span:nth-child(3) {
animation-delay: 0.3s;
background-color: green;
box-shadow: 5px 5px 0 black;
}
span:nth-child(4) {
animation-delay: 0.4s;
background-color: orangered;
box-shadow: 5px 5px 0 black;
}
span:nth-child(5) {
animation-delay: 0.5s;
background-color: springgreen;
box-shadow: 5px 5px 0 black;
}
span:nth-child(6) {
animation-delay: 0.6s;
background-color: blueviolet;
box-shadow: 5px 5px 0 black;
}
span:nth-child(7) {
animation-delay: 0.7s;
background-color: purple;
box-shadow: 5px 5px 0 black;
}
<div>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</div>
There is a keyframes animation for my button focused state. The problem is when the button comes in the focus state, the animation starts to play and that animation results in weird jumping of the button text.
How to prevent this weird shaky and jumpy behavior of text.
Thank you !
.btn-inline {
border: none;
color: #eb2f64;
font-size: inherit;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
display: inline-block;
background-color: transparent;
cursor: pointer;
transition: all .2s;
}
.btn-inline:hover {
color: #333333;
}
.btn-inline:focus {
outline: none;
animation: Pulsate 1s infinite;
}
#keyframes Pulsate {
0% {
transform: scale(1);
box-shadow: none;
}
50%{
transform: scale(1.05);
box-shadow: 0 1rem 4rem rgba(0, 0, 0, .25);
}
100%{
transform: scale(1);
box-shadow: none;
}
}
<button class="btn-inline">Albufeira, Portugal</button>
I'm working on a CSS slider animation.
Everything is pretty much done apart from one last thing:
The wanted behaviour is that if I hover over the slider thumb, the slider grows in height and the value moves in the centre of the slider. This works as expected, however when the slider thumb goes underneath the newly positioned value, it goes back to the previous size (basically reverting the animation).
I think that I need some sort of "pass-through", so that basically even if I'm not technically hovering on the slider, the value doesn't interfere at all with my animation.
I know, it is not clear at all, that's why I'm including a codepen to help you better understand what I mean. Change the slider and stop it at 29. Then try sliding again and you will see the wrong effect and what I mean.
https://codepen.io/NickHG/pen/NYOoXR?editors=0110
I'm also posting the code here for future reference: (note: is done using LESScss):
#temp0-14: #185fb6;
#temp15-19: #00bcd4;
#temp20-23: #ffc107;
#temp24-31: #ef6b52;
#gaps: 8, 4, 4, 15;
#temps: #temp24-31, #temp20-23,#temp15-19, #temp0-14;
#darkText: #000;
#lightText: #fff;
#percentage: 20%;
#desaturate-percentage: 40%;
.gaps-loop(#i, #prevgap) when (#i > 0) {
#gap: extract(#gaps, #i);
#temp: extract(#temps, #i);
.span-gen-loop(#j) when (#j < #gap) {
#k: #j + #prevgap;
.temp-#{k} {
display: block;
background: #temp;
color: contrast(#temp, #darkText, #lightText, #percentage);
&:hover {
//background: darken(#temp, 8%);
}
}
.temp-color-#{k} {
color: contrast(#temp, #darkText, #lightText, #percentage);
}
.span-gen-loop(#j + 1);
}
.span-gen-loop(0);
.gaps-loop(#i - 1, #prevgap + #gap);
}
.gaps-loop(length(#gaps), 0);
.animate-color-change {
transition: background 0.8s ease;
}
/* Slider custom style */
#entryHeight: 60px;
#sliderTrackHeight: 25px;
#sliderThumbHeight: #sliderTrackHeight;
#sliderThumbWidth: 25px;
.entry-external-container {
font-family: "Roboto", sans-serif;
height: #entryHeight;
min-height: #entryHeight;
width: 100%;
max-width: 400px;
display: block;
border: 1px solid black;
display: flex;
align-items: flex-end;
padding: 0;
margin: 0;
position: relative;
.dataName {
display: block;
width: 100%;
position: absolute;
top: 0;
transform: translateY(50%);
padding-left: 10px;
z-index: 2;
animation-timing-function: ease-out;
animation: dataNameIn 0.4s forwards;
}
.dataValue {
display: block;
width: 25px;
position: absolute;
top: 0;
text-align: right;
right: 10px;
transform: translateY(50%);
padding-right: 10px;
z-index: 2;
animation-timing-function: ease-in-out;
animation: dataValueZoomOut 0.1s forwards;
}
.slidecontainer {
width: 100%;
box-sizing: content-box;
.custom-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: #sliderTrackHeight;
outline: none;
opacity: 0.7;
margin: 0;
animation: sliderAnimationBackgroundOut 0.3s;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: #sliderThumbWidth;
height: #sliderThumbHeight;
background: white;
cursor: pointer;
transition: height 0.25s, box-shadow 0.4s;
border: 1px solid rgba(0, 0, 0, 0.6);
box-sizing: border-box;
border-radius: 3px;
}
&:hover,
&:active {
&~.dataName {
animation: dataNameOut 0.4s forwards;
}
&~.dataValue {
animation: dataValueZoomIn 0.4s forwards;
&:hover{pointer-events:none;}
}
animation: sliderAnimationBackgroundIn 0.3s forwards;
&::-webkit-slider-thumb {
border-radius: 0px 3px 3px 0;
height: #entryHeight;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-left: none;
-webkit-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
background: -webkit-gradient(
linear,
-20 0,
100% 0,
from(transparent),
to(white),
color-stop(80%, white)
);
}
}
}
}
}
#keyframes sliderAnimationBackgroundIn {
0% {
opacity: 0.7;
height: #sliderTrackHeight;
}
100% {
opacity: 1;
height: #entryHeight;
}
}
#keyframes sliderAnimationBackgroundOut {
0% {
opacity: 1;
height: #entryHeight;
}
100% {
opacity: 0.7;
height: #sliderTrackHeight;
}
}
#keyframes dataNameOut {
0% {opacity: 1;top: 0}
20% {opacity: 0;top: -15px}
100% {top: -40px;opacity: 0}
}
#keyframes dataNameIn {
0% {top: -40px;opacity: 0}
20% {opacity: 0;top: -15px}
100% {opacity: 1;top: 0}
}
#keyframes dataValueZoomIn {
0% { transform: scale(1); top: 5px; right: 7.5px;}
25% { transform: scale(1.2); top: 10px; right: 10px;}
50% { transform: scale(1.3); top: 15px;right: 11px;}
75% { transform: scale(1.4); top: 20px;right: 13px;}
100% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
#keyframes dataValueZoomOut {
100% { transform: scale(1); top: 5px; right: 7.5px;}
75% { transform: scale(1.2); top: 10px; right: 10px;}
50% { transform: scale(1.3); top: 15px;right: 11px;}
25% { transform: scale(1.4); top: 20px;right: 13px;}
0% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
use pointer-events to prevent an element from being hovered :
The pointer-events CSS property specifies under what circumstances (if
any) a particular graphic element can become the target of mouse
events.
.dataValue {
pointer-events: none;
}
PEN
You could achieve the same effect setting the hover state to the parent.
PEN
.slidecontainer {
width: 100%;
box-sizing: content-box;
&:hover {
.custom-slider {
...
}
}
}
Note: Is not a good practice to nest more than 3 levels deep,
I'm building a very simple bounce card animation, however at some point the animation got reseted and the result is not fluent.
Please check:
div{
width: 110px;
height: 50px;
background: #EEE;
border: 1px solid #BBB;
border-radius: 3px;
padding: 3px 5px;
font-family: sans-serif;
left: 200px;
position: absolute;
}
#keyframes cardBouncing {
20%, 60%, to {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
0%, 40%, 80% {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
}
div{
box-shadow: 3px 3px 10px grey;
animation: 1.5s cardBouncing infinite; //flipInX;
}
<div>HOla!</div>
How I can make it bouncing without that "jump"
This is for a drag animation, how can I center in the mouse cursor position? It seems like it go to much at the left. It's possible?
The solution is with: animation-direction: alternate-reverse;
div{
width: 110px;
height: 50px;
background: #EEE;
border: 1px solid #BBB;
border-radius: 3px;
padding: 3px 5px;
font-family: sans-serif;
position: absolute;
left: 180px;
}
#keyframes cardBouncing {
from {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
to {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
}
div{
box-shadow: 3px 3px 10px grey;
animation: 0.4s cardBouncing infinite;
animation-direction: alternate-reverse;
}
<div> Hola! </div>
I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.