This question already has answers here:
How to prevent a CSS keyframe animation from running on page load?
(9 answers)
Closed 1 year ago.
I want to animate the background color and transform of a HTML button. When I use the animation, the starting animation is also shown. The background color of the button is green, when I open the page, the background color is animated from white to green. I don't want this animation, but I still want to keep the animation when the button is hovered on.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;600&display=swap');
:root {
--navbar-text-size: 18px;
--navbar-text-color: hsla(240, 100%, 99%, 1);
--background-color-A: hsla(160, 100%, 75%, 1);
--background-color-B: hsla(203, 92%, 75%, 1);
--navbar-background-color: hsla(0, 0%, 31%, 1);
--navbar-text-color-hover: hsla(195, 100%, 50%, 1);
--navbar-light-font-weight: 300;
--navbar-heavy-font-weight: 600;
--navbar-button-background-color: hsla(157, 100%, 49%, 1);
--navbar-button-background-color-hover: hsla(157, 100%, 49%, 0.8);
}
.body {
margin: 0px;
padding: 0px;
background: var(--background-color-A);
background: -webkit-linear-gradient(to right, var(--background-color-A), var(--background-color-B));
background: linear-gradient(to right, var(--background-color-A), var(--background-color-B));
box-sizing: border-box;
}
.body-header {
display: flex;
padding: 15px 10%;
align-items: center;
justify-content: space-between;
background-color: var(--navbar-background-color);
}
.body-header-h2 {
color: var(--navbar-text-color);
font-size: var(--navbar-text-size);
font-family: "Poppins", sans-serif;
font-weight: var(--navbar-heavy-font-weight);
text-decoration: none;
}
.body-header-nav-ul {
list-style: none;
}
.body-header-a-button {
color: var(--navbar-text-color);
border: none;
cursor: pointer;
padding: 9px 25px;
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-heavy-font-weight);
border-radius: 50px;
text-decoration: none;
background-color: var(--navbar-button-background-color);
transition-duration: 0.5s;
transition-property: transform, background-color;
-o-transition-duration: 0.5s;
-o-transition-property: transform, background-color;
-moz-transition-duration: 0.5s;
-moz-transition-property: transform, background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: transform, background-color;
}
.body-header-nav-ul-li {
color: var(--navbar-text-color);
display: inline-block;
padding: 0px 20px;
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-light-font-weight);
text-decoration: none;
}
.body-header-nav-ul-li-a {
color: var(--navbar-text-color);
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-light-font-weight);
text-decoration: none;
}
.body-header-a-button:hover {
transform: scale(0.95);
background-color: var(--navbar-button-background-color-hover);
/* transition-duration: 0.5s;
transition-property: all;
-o-transition-duration: 0.5s;
-o-transition-property: all;
-moz-transition-duration: 0.5s;
-moz-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all; */
}
.body-header-nav-ul-li-a:hover {
color: var(--navbar-text-color-hover);
transition-property: color;
transition-duration: 0.5s;
}
<body class="body">
<header class="body-header">
<h2 class="body-header-h2">
Test
</h2>
<nav class="body-header-nav">
<ul class="body-header-nav-ul">
<li class="body-header-nav-ul-li">
<a href="/" class="body-header-nav-ul-li-a">
Test1
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/about" class="body-header-nav-ul-li-a">
Test2
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/join" class="body-header-nav-ul-li-a">
Test3
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/releases" class="body-header-nav-ul-li-a">
Test4
</a>
</li>
</ul>
</nav>
<a href="/login" class="body-header-a">
<button class="body-header-a-button">
Button
</button>
</a>
</header>
</body>
I'm sorry I couldn't really understand what you actually want but if you can keep the transformation property as it is, if that's what you want it to look like when it's hovered on but you can simply change you navbar button color if you don't like the colors
Related
I am trying to figure out if there's a way to move a link when hovering over it without moving its border. I want my links to move left but I don't want the border that I put to go with it. Here is a fiddle with what I am talking about. If you hover over any of the links, you see that the border moves with it, and I'd like to know if it's possible to not move the border.
And here is the code:
.links {
width: 240px;
margin-left: -35px;
text-align: right;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
display: block;
}
.links a {
border-bottom: 1px solid rgba(117, 117, 117, 0.3);
display: block;
padding: 8px;
}
.links a:hover {
border-bottom: 1px solid rgba(207, 166, 255, 0.5);
font-style: italic;
margin-right: 10px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
<div class="links">
link
link
link
link
link
</div>
Does anyone have any ideas?
You can put a <span> tag in your link tag then apply the transition to the <span>
https://jsfiddle.net/DIRTY_SMITH/n4Lsrv3k/2/
HTML
<div class="links">
<span>link</span>
<span>link</span>
<span>link</span>
<span>link</span>
<span>link</span>
</div>
CSS
span:hover {
border-bottom: 1px solid rgba(207, 166, 255, 0.5);
font-style: italic;
margin-right: 10px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
Replace .links a:hover styling with the following code.
.links a:hover {
font-style: italic;
padding-right: 20px;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
In your hover style, change margin-right: 10px; to padding-right: 20px;
Since Padding is spacing inside the border and Margin is for spacing outside the border, just change margin-right to padding-right (as Slawomir said)
Here is the fiddle with the change
[https://jsfiddle.net/092fd4hv/][1]
.links a:hover {
border-bottom: 1px solid rgba(207, 166, 255, 0.5);
font-style: italic;
padding-right: 20px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
Adding a span tag is one way but you also can make a list from ul, border the li and animate the a when hover. Then you don't need to wrap every single element with the span tag.
.links > li {
width: 240px;
margin-left: -35px;
text-align: right;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
padding: 8px;
display: block;
border-bottom: 1px solid rgba(117, 117, 117, 0.3);
}
.links a:hover {
font-style: italic;
margin-right: 10px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
<ul class="links">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
So you actually can remove several CSS code lines from .links a.
I working with sociable on hover background-color slide down from top to bottom I wrote CSS but I don't know why it's not working.
ul.socials {
display: flex;
flex-direction: row;
list-style-type: none;
font-size: 20px;
}
.socials li {
padding: 12px;
}
.socials li.facebook {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.facebok:hover {
background-position: 0 -100%;
color: #ffffff;
}
i.fa.fa-facebook {
color: #3B5998;
}
i.fa.fa-twitter {
color: #00A0D1;
}
i.fa.fa-dribbble {
color: #ea4c88;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
<ul class="socials">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="dribbble"><i class="fa fa-dribbble"></i></li>
</ul>
</div>
Here is the working code for your reference. I made sliding effect working for all 3 icons.
ul.socials {
display: flex;
flex-direction: row;
list-style-type: none;
font-size: 20px;
}
.socials li {
padding: 12px;
}
.socials li.facebook {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.twitter {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #00A0D1 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.dribbble {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #ea4c88 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li:hover {
background-position: 0 -100%;
color: #ffffff;
}
i.fa.fa-facebook {
color: #3B5998;
}
i.fa.fa-twitter {
color: #00A0D1;
}
i.fa.fa-dribbble {
color: #ea4c88;
}
.socials li:hover a i {
color: #fff;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
<ul class="socials">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="dribbble"><i class="fa fa-dribbble"></i></li>
</ul>
</div>
A typo mistake : use .socials li.facebook:hover instead of .socials li.facebok:hover
ul.socials {
display: flex;
flex-direction: row;
list-style-type: none;
font-size: 20px;
}
.socials li {
padding: 12px;
}
.socials li.facebook {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.facebook:hover {
background-position: 0 -100%;
color: #ffffff;
}
i.fa.fa-facebook {
color: #3B5998;
}
i.fa.fa-twitter {
color: #00A0D1;
}
i.fa.fa-dribbble {
color: #ea4c88;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
<ul class="socials">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="dribbble"><i class="fa fa-dribbble"></i></li>
</ul>
</div>
I'm in need for a CSS/SCSS/SASS guru to help me determine what I am doing wrong with this simple animation.
Objective: What I'm trying to accomplish a simple animation in which the fontawesome icon fa-angle-right fly in from the left after the word, onHover. I figured this could be done with a display: none property and adding some transition to the parent property, but it's not animating as intended.
The caveat here is that I CANNOT change the HTML structure.
An example of what I'm trying to do; but granted this is using a different HTML structure & SVG instead of fontawesome icons
JSFiddle: https://jsfiddle.net/bwrmam9o/1/
HTML
<a href="#" class="btn ripple">
<i class="fa fa-left fa-location-arrow"></i>
<span class="label">View Location </span>
<i class="fa fa-right fa-angle-right fa-animate"></i>
</a>
SCSS/SASS
.btn{
display: inline-block;
color: #FFF;
background: #CB5039;
text-decoration: none;
font-family: Arial;
padding: 10px 12px;
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
transition: all 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
.fa-left{
margin-right: 5px;
}
.fa-right{
margin-left: 5px;
}
.fa-animate{
display: none;
transition: all 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
}
&:hover{
background: blue;
.fa-animate{
display: inline-block;
}
}
}
.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #FFF 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .25s, opacity 1s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: .2;
transition: 0s;
}
Any help on this would be greatly appreciated!
is this what you want? modify style like this .
.fa-animate{
left: -15px;
position:relative;
opacity: 0;
transition: 1s;
}
&:hover{
background: blue;
.fa-animate{
left: 0;
opacity:1;
}
}
full edited code here : https://jsfiddle.net/jayakrishnancn/bwrmam9o/3/
So I'm trying to do something like tiles or what netflix does. I have a box that I am trying to make grow on mouse hover and reduce in size when the mouse leaves. So Far I have this.
.nav {
position: relative;
top: 25%;
width: 100%;
color: black;
text-align: center;
}
.nav a {
color: white;
text-decoration: none;
}
.link {
font-size: 24px;
width: 100%;
height: 25%;
background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
display: inline;
padding-right: 12.5%;
padding-left: 12.5%;
padding-bottom: 6.25%;
padding-top: 6.25%;
box-shadow: 0px 0px 10px 5px grey;
animation-name: downsize;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.link:hover {
animation-name: resize;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 32px;
padding-right: 14.5%;
padding-left: 14.5%;
padding-bottom: 8.25%;
padding-top: 8.25%;
}
<div class="nav">
<a href="/public/MM/EnterUp">
<div class="link" style="margin-right: 15px;">
Enter Up
</div>
</a>
<a href="/public/MM/EnterUp">
<div class="link" style="margin-right: 15px;">
View Ups
</div>
</a>
</div>
I used CSS-Tricks
to get it to reduce after the mouse hover. My problem is that unlike CSS-Tricks, when you load the page I don't want the downsize animation to run, just after the mouse leaves. Anyone have a solution? Thanks for the help!
While there is no equivalent of the mouseleave or mouseout events in CSS, you can achieve the same behaviour by applying the "exit" transition to the selector and then overriding it with the "enter" transition using the :hover pseudo-class, like so:
div{
background:#000;
color:#fff;
font-size:16px;
line-height:100px;
text-align:center;
transition:font-size .5s ease-out,line-height .5s ease-out,width .5s ease-out;
width:100px;
}
div:hover{
font-size:20px;
line-height:125px;
transition:font-size .25s ease-in,line-height .25s ease-in,width .25s ease-in;
width:125px;
}
/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}
<div>Text</div>
Alternatively, if the transition you wish to apply is the same in both cases, only reversed then there is no need to override it in your :hover selector.
you can simply just use transition for the padding
something like this in your case should do it:
.nav {
position: relative;
top: 25%;
width: 100%;
color: black;
text-align: center;
}
.nav a {
color: white;
text-decoration: none;
}
.link {
font-size: 24px;
width: 100%;
height: 25%;
background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
display: inline;
padding-right: 12.5%;
padding-left: 12.5%;
padding-bottom: 6.25%;
padding-top: 6.25%;
box-shadow: 0px 0px 10px 5px grey;
transition: padding 0.4s ease-out;
}
.link:hover {
font-size: 32px;
padding-right: 14.5%;
padding-left: 14.5%;
padding-bottom: 8.25%;
padding-top: 8.25%;
}
The key here is the use of:
transition: padding 0.4s ease-out;
I made this menu before i just started using bootstrap. The menu is generated from the database. The HTML output is shown below.
<ul id="nav">
<li value="1">Home</li>
<li value="2">
Portfolio
<ul class='Subs'>
<li value="5">Web Design</li>
<li value="6">Graphic Design</li>
<li value="7">Logo Design</li>
<li value="8">Blog Design</li>
</ul>
</li>
<li value="3">
Projects
<ul class='Subs'>
<li value="9">Project1</li>
<li value="10">Project2</li>
<li value="11">Project3</li>
<li value="12">Project4</li>
</ul>
</li>
<li value="4">
Contact
<ul class='Subs'>
<li value="13">Support</li>
<li value="14">Quote</li>
<li value="15">General Inquiry</li>
</ul>
</li>
<li value="16">kaas</li>
</ul>
Here is the CSS i use
#nav span {
display: none;
}
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
z-index: 99;
}
#nav {
color-stop(0, #E3E3E3),
color-stop(0.5, white)
background-image: -o-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -moz-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -webkit-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -ms-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: linear-gradient(to bottom, #E3E3E3 0%, white 100%);
border-bottom: 5px solid #333333;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
color-stop(0, #E3E3E3),
color-stop(0.5, white)
background-color: -o-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -moz-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -webkit-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -ms-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: linear-gradient(to bottom, white 0%, #E3E3E3 100%);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#nav li{
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li{
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover, #nav :hover {
background-color: #F55856;
color: #FFFFFF;
cursor: pointer;
}
#nav li.active > li{
background-color: #333333;
color: #FFFFFF;
}
#nav li:hover ul.subs {
display: block;
}
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li{
color: #777777;
line-height: 20px;
}
#nav ul.subs > li{
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li{
float: none;
padding-left: 8px;
font-size: 0.8em;
margin: 0px;
padding: 5px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
#nav ul.subs > li:hover{
color: red;
cursor: pointer;
}
Without bootstrap it looks fabulous, so could anybody explain to me how this is happening and this can be fixed?
Thanks in advance
You put an uppercase letter at the beginning of the class Subs when it should actually be subs, which, if you check your CSS is a correct match.
DEMO JSFiddle