I am trying to achieve hover animation with font-awesome fa icon-circle.
Problem is "Facebook circle" animation seems comes with delay. How can i achieve faster light on animation without giving smaller number of animation time with transitions.
HTML
<ul class="social-icons">
<li>
<a href="#www.facebook.com/mobge">
<span class="fa-stack fa-3x socialSpan">
<i class="fa fa-circle fa-stack-2x circleIco">
</i>
<i class="fa fa-facebook fa-stack-1x secondIco">
</i>
</span>
</a>
</li>
[...]
</ul>
SCSS
.socialSpan, .circleIco, .secondIco{
-webkit-transition:all 0.4s; /* For Safari 3.1 to 6.0 */
transition:all 0.4s;
}
.social-icons{
li{
a{
color: $sublimeGray;
}
a:hover{
color: $facebookColor;
margin-top: 20px;
}
}
}
Example: http://codepen.io/anon/pen/zaBxE/
Thank you.
You apply a CSS transition to two extra elements here, which may slow the transition.
It concerns socialSpan's children so remove the transitions applied to:
.socialSpan {
transition:all 0.4s;
}
instead of
.socialSpan, .circleIco, .secondIco{
transition:all 0.4s;
}
Demonstration!
Related
I am attempting to animate a right-aligned Bootstrap dropdown with CSS and am not able to get it working. I thought by setting the transition property to apply to the element's width property it would work, but it does not.
I can see the width of the element is initially set to 0 in my browser inspector, and is set to "auto" after the menu is made visible. I can see the transition getting applied if I adjust the width manually, but for some reason it won't happen when the menu is shown. I've tried using pixel values instead of "auto" with no change.
I'm expecting to see the menu "slide out" to the right at the same rate as the menu button rotates. Is this possible?
div.dropdown > .btn {
transition: transform 0.8s cubic-bezier(0,-0.14,.27,1.55);
transform: rotate(90deg);
}
div.dropdown > .btn.show {
transform: rotate(270deg);
}
div.dropdown > .dropdown-menu {
transition: width 0.8s cubic-bezier(0,-0.14,.27,1.55);
width: 0;
}
div.dropdown > .btn.show + .dropdown-menu {
width: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown dropend p-4">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown">
++
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
You can try this solution.
Animation in transition is your own.
div.dropdown > .btn {
transition: transform 0.8s cubic-bezier(0,-0.14,.27,1.55);
transform: rotate(90deg);
}
div.dropdown > .btn.show {
transform: rotate(270deg);
}
div.dropdown>.dropdown-menu {
display: inherit;
transform: translate(69px, 19px) scaleX(0);
transition: all 0.8s cubic-bezier(0,-0.14,.27,1.55);
transform-origin:left;
left: 0;
}
div.dropdown>.btn.show+.dropdown-menu {
display: inherit;
transform: translate(69px, 19px) scaleX(1);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown dropend p-4">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown">
++
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
Fixed for firefox
div.dropdown>.btn.show+.dropdown-menu {
display: inherit;
transform: translate(69px, 19px) scaleX(1);
}
I have this span:
<span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span>
I changed the colour like this:
.fa-green {
color: #008d4c;
}
However, the hover function does not work:
.fa-green:hover {
color: black;
}
What's wrong?
Your code looks fine. Make sure your hover style is not overridden by other styles or class.
html
<a href="#">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
<a href="#" class="more-power">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
css
.fa-green {
color: #008d4c
}
.fa-green:hover {
color: black
}
a.more-power:hover span {
color: #008d4c
}
Check this out https://jsfiddle.net/ayjwm23d/36/
I'm trying to add a border around individual fontawesome icons (using the Unicode codes). For example, in my CSS file I'm using:
content: "\f008\00a0\f001\00a0\f26c"
But if I try to add a border here, it puts one border around all three icons. Is there a way I can get a border around each of the three icons individually (not the 00a0 spaces).
Thank You
Nope...it's one element (or pseudo-element) with multiple characters...so you only get one border.
It's like trying to put a border round the individual letters in a span...can't be done.
At best, Font-Awesome offers a method of putting borders around icons using stacking but usually only for single icons. Whether you could tweak that is arguable.
Could be a fun experiment.
The way it should be done:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
i:before {
font-family: 'FontAwesome';
}
i.one:before {
content: "\f008";
}
i.two:before {
content: "\f001";
}
i.three:before {
content: "\f26c";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa one fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa two fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa three fa-stack-1x"></i>
</span>
I am trying to change color on hover of fa fa icon but not changing?
http://jsfiddle.net/Lgvbbqeo/25/
.fa-arrow-circle-right {
float:right;
color:white;
margin-right:10px;
}
.fa-fa-arrow-circle-right :hover{
color:#888888;
}
HTML:
<button type="button" class="buttonl">View Locations<i class="fa
fa-arrow-circle-right fa-2x"></i>
</button>
You have a little mistake in your selector
.fa-fa-arrow-circle-right :hover should be .fa-arrow-circle-right :hover or .fa :hover or .fa .fa-arrow-circle-right :hover
This worked
.buttonl:hover .fa-arrow-circle-right
I have span and image inside anchor tag, the problem is when I hover them they does not hover as one.
<a href="">
<img src="image"/>
<span>Shopping Cart</span>
</a>
a :hover {
opacity: 0.6;
}
Fiddle
any help would be appreciated. thank you.
In a :hover, you are selecting a descendant of an <a> element that is being hovered. That's why they activate separately. If you remove the space (a:hover), it will select the <a> that is being hovered, which is what you want.
problem is your space between a and (:)
<a href="">
<img src="image"/>
<span>Shopping Cart</span>
</a>
a:hover {
opacity: 0.6;
}
see demo http://jsfiddle.net/JentiDabhi/7ondpajd/
You could include the <img> in your <span>:
<a href="">
<span><img src="image"/>Shopping Cart</span>
</a>
a :hover {
opacity: 0.6;
}
<a href="">
<span><img src="image"/>Shopping Cart</span>
</a>