I am working on a web site that uses Bootstrap. I am only using the included Glyphicons pack. There are three important features from Font Awesome that I need though.
Fixed Width Icons
Fa-Spin
The rotated and flipped options
These three features can be seen in the examples. My question is, is there a way to include these features with the Glyphicons pack? If so, how?
Thank you!
Ajmajmajma is correct. Those effects are simply css additions to FontAwesome and can be easily replicated. You can also copy those css rules, add them to your own stylesheet, and then add the corresponding classes to the glyphicon.
Here is an example and fiddle:
.glyphicon-fw {
width: 1.28571429em;
text-align: center;
}
.glyphicon-spin {
-webkit-animation: glyphicon-spin 2s infinite linear;
animation: glyphicon-spin 2s infinite linear;
}
.glyphicon-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.glyphicon-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.glyphicon-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.glyphicon-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.glyphicon-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
:root .glyphicon-rotate-90,
:root .glyphicon-rotate-180,
:root .glyphicon-rotate-270,
:root .glyphicon-flip-horizontal,
:root .glyphicon-flip-vertical {
filter: none;
}
#-webkit-keyframes glyphicon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes glyphicon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Related
I need an arrow to slightly move (bounce) to the bottom right corner on hover, using CSS. I've used the code below and I like what it does however this only moves the arrow left/right. How do I amend it so that it moves slightly to the bottom as well? I've tried using 'translateY' but couldn't workout the exact pixel amount for the animation to be smooth.
I've tried using 'bounce' but actually 'swing' seems to look better.
What I'm looking for is the kind on animation of this page:
http://ianlunn.github.io/Hover/ (called 'Wobble to Bottom Right')
.arrow:hover{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
You have to use translate(x,y) instead of translateX(x) for 2d transformation as #fen1x mentioned in the comment above
Try this:
#keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
And I can't get anything to work, would be great if someone could take a look and help me out
Try to remove the unprefixed versions of your css:
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:
.bounceIn.go {
animation: bounceIn 2s;
}
The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.
I know how to scale from 1 to 2:
transition: all 1s ease-in-out;
transform: rotate(360deg) scale(2);
But I need from 0.1 to 1. Is there any way to do it?
You have two options, using animation or transition, both will work as anticipated as long as you specify the starting values. animation is typically the preferred option when you want more control over the intermediate keyframes, or the immediate application of an animation.
HTML
<div></div>
Using animation
div {
background:red;
height:100px;
width:100px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-animation: transformer 4s ease-in 0s 1;
animation: transformer 4s ease-in 0s 1;
}
#-webkit-keyframes transformer {
from {
-webkit-transform: rotate(0deg) scale(0.1);
}
to {
-webkit-transform: rotate(360deg) scale(2);
}
}
#keyframes transformer {
from {
transform: rotate(0deg) scale(0.1);
}
to {
transform: rotate(360deg) scale(2);
}
}
Using transition
div {
width:100px;
height:100px;
background:red;
transition: all 1s ease-in;
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
You need to specify transform: scale(0.1); on the element (don't forget vendor prefixes) before you scale it to 1.
See the example below:
FIDDLE
CSS:
div{
width:500px;
height:500px;
background:gold;
transition: all 1s ease-in-out;
-ms-transform: rotate(0deg) scale(0.1);
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover{
-ms-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
#keyframes fadeOutDownMed {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(150px);
-ms-transform: translateY(150px);
transform: translateY(150px);
}
}
http://jsfiddle.net/iaezzy/99JbQ/
This works but the animation is straight down, I need it to fade out slant like \, or to a certain element wherever that might be, is that possible?
Thanks
Try append translateX to the transform attribute like this:
#keyframes fadeOutDownMed {
0% {
opacity: 1;
-webkit-transform: translateY(0) translateX(0);
-ms-transform: translateY(0) translateX(0);
transform: translateY(0) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(150px) translateX(150);
-ms-transform: translateY(150px) translateX(150);
transform: translateY(150px) translateX(150);
}
}
Demo: http://jsfiddle.net/k7Wp4/
I asked me a question. When I create animation with the -webkit- prefix (or an another prefixes), I need to write properties with this prefix only or I must add all of the prefixes.
e.g.
#-webkit-keyframes bounce {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
or
#-webkit-keyframes bounce {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
Since only WebKit browsers can apply #-webkit-keyframes rules, it doesn't make any sense whatsoever to include any other prefixes inside those rules.
You want to include other prefixes for the #keyframes rules, not the properties within them. The properties inside use matching prefixes where appropriate:
#-webkit-keyframes bounce {
0% { -webkit-transform: scale(0); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes bounce {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
#-o-keyframes bounce {
0% { -o-transform: scale(0); }
100% { -o-transform: scale(1); }
}
#keyframes bounce {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
(There is no #-ms-keyframes, and it is not necessary to use -ms-transform in #keyframes.)