I'm trying to create a spinner like this (the right one).
I literally copied the code, but the result is so different (shape, speed, fluentness...)
Obviously, something is wrong. Any help?
#keyframes rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotation {
0% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
}
}
.spinner{
position:fixed;
left:calc(50% - 15px);
top:63px;
}
.fa-spinner{
font-size: 5em;
animation: rotation 2s infinite steps(8);
-webkit-animation: rotation 2s infinite steps(8);
-moz-animation: rotation 2s infinite steps(8);
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<i class="fa fa-spinner spinner"></i>
The example you cited used fontAwesome4 whereas your implementation uses FA5. I'm afraid I can't fully explain why that explains the difference (and why it was decided to do that differently), but the nice size-change during animation can only be achieved with V4, I think:
FontAwesome 4.7:
#keyframes rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotation {
0% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
}
}
.spinner{
position:fixed;
left:calc(50% - 15px);
top:63px;
}
.fa-spinner{
font-size: 5em;
animation: rotation 2s infinite steps(8);
-webkit-animation: rotation 2s infinite steps(8);
-moz-animation: rotation 2s infinite steps(8);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-spinner fa-3x"></i>
FontAwesome 5.3.1:
#keyframes rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotation {
0% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
}
}
.spinner{
position:fixed;
left:calc(50% - 15px);
top:63px;
}
.fa-spinner{
font-size: 5em;
animation: rotation 2s infinite steps(8);
-webkit-animation: rotation 2s infinite steps(8);
-moz-animation: rotation 2s infinite steps(8);
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<i class="fas fa-spinner fa-3x"></i> <!-- NB: "fas", not "fa" -->
Related
So, I'm using ChartistJSF (based on Chartist), the jsf version is kinda simples, so I'm trying to use some plugins offered in the javascript version, but I'm trying to figure out how to do this, because every chart "module" in JSF has a extend where I can put some extra configurations, but this one doesn't have. Can you guys help me?
Since 3.0, ChartistJSF supports plugins, here's an example of chartist-plugin-threshold:
xhtml
<ct:chart id="lineChart" type="line" model="#{chartDataBean.pluginsModel}"
plugins="myPlugins"
styleClass="example-plugin-threshold">
</ct:chart>
js
<script>
var myPlugins =
[
Chartist.plugins.ctThreshold({
threshold: 4
})
];
</script>
css
.example-plugin-threshold .ct-line {
stroke-dasharray: 5px;
animation: dashoffset 1s linear infinite;
}
.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-above {
stroke: #f05b4f;
}
.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-below {
stroke: #59922b;
}
.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-above {
fill: #f05b4f;
}
.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-below {
fill: #59922b;
}
#-webkit-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#-moz-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#-ms-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
Result:
I am trying to have one image come into view behind another one. Is it possible to use z-index/opacity to accomplish this? Below is the code I'm referring to. I'm using the background-position property to move things in-out of view.
#-webkit-keyframes bannerAnimation {
0% {
background-position-x:
-240px,
-160px,
-240px,
0;
}
50% {
background-position-x:
-240px,
-45px,
-140px,
0;
}
100% {
background-position-x:
117px,
-65px,
117px,
0;
}
0%, 48% {
background-position-y:
-4000px,
0px,
480px,
0px;
}
50%, 100% {
background-position-y:
14px,
0px,
43px,
0px;
}
0% {
opacity:
0,
1,
0,
1;
}
50% {
opacity:
0,
1,
0,
1;
}
100% {
opacity:
1,
1,
1,
1;
}
}
#banner a#main .content {
background-image:
url('../images/95x27_headline_2x.png'),
url('../images/155x50_stephen_2x.png'),
url('../images/41x4_copy_2x.png'),
url('../images/320x50_bg_2x.png');
background-size:
95px 27px,
155px 50px,
41px 4px,
320px 50px;
background-position-y:
50px,
0px,
50px,
0px;
-webkit-animation: bannerAnimation 6s ease forwards;
to achieve what you are trying to do I would suggest using seperate divs for seperate images.
Then instead of animating background-position, try animating the z-index itself.
#keyframes move {
from { z-index: 0; transform: scale(1); }
to { z-index: 4; transform: scale(2.5); }
}
Check out this example on codepen.io to get you started in the right direction :)
I've been trying to re-create the Google Ripple effect for buttons. You can see it: here
It works in Chrome, but only in chrome. And I can't seem to figur out why.
I am making the ripple like this: On click, create an svg inside the button. Which is placed at the right position using mouse coordinates. Then it is animated trough css keyframe animations, which animate the circle radius (r="*").
css:
body .custom-container .btn-custom .ripple-svg circle {
opacity: 0;
transform: traslateZ(0);
-webkit-animation: flowAnimation 1s;
-moz-animation: flowAnimation 1s;
-o-animation: flowAnimation 1s;
animation: flowAnimation 1s;
}
#-webkit-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#-moz-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#-o-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
JS:
// Mouse coordinates in button
var MousePosX
var MousePosY
var offset = $("#flow-button").offset();
// Set coordinates on mouse move
$('#flow-button').on( "mousemove", function( event ) {
MousePosX = ( event.pageX - offset.left);
MousePosY = ( event.pageY - offset.top + 15);
});
// Ripple effect
$('#flow-button').on("click", function(){
// Append svg circle on each click
$('#flow-button').append('<svg class="ripple-svg" height="100%" width="100%"><circle r="10" fill="black" /></svg>');
// Append is following mouse coordinates
$('.ripple-svg circle').css({
cx: MousePosX,
cy: MousePosY
});
// On multiple clicks delete all but the last one
if ($('.ripple-svg').length > 2) {
$('.ripple-svg:not(:last-child)').remove();
}
});
Anyone any idea?
In SVG 1.1 radius (r) is an attribute and not a CSS property. In SVG 2 it is proposed that most attributes should become CSS properties.
SMIL can animate both attributes and CSS properties but CSS animations can only animate CSS properties.
Chrome has implemented this part of the SVG 2 specification (to see how feasible it is). No other UA has done so yet but in the future any of them might do so.
I want to make a simple effect with an svg path rotating inside another path. The code is as simple as:
#lens {
animation: roll 2s infinite;
}
#keyframes roll {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
The idea is to make an eye rotating about axis, but instead of this it keeps rotating around whole svg. It's difficult to explain but you will understand the problem once you take a look on this jsfiddle template: https://jsfiddle.net/faster223/6d45ck42/
The eye is supposed to stay fixed on one place while rotating.
Let me add this for someone facing issue with SVG path rotation. you would need to have the below styles.
#lens {
animation: roll 2s infinite;
transform-origin: center;
transform-box: fill-box;
}
#keyframes roll {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg)}
}
You need to add transform-origin: 50% 50%; to #lens so it looks like this:
#lens {
animation: roll 2s infinite;
transform-origin: 50% 50%;
}
#keyframes roll {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
I have also faced the same issue and only the missing piece was transform-box: fill-box; thanks to #Aqib Mapari answer the below code works for me
#lens {
animation: roll 2s infinite;
transform-origin: 50% 50%;
transform-box: fill-box;
}
#keyframes roll {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
I tried to animate the width of a SVG like this and it did not work
Normally I can have multiple lines, but can I make them thicker/thinner?
.swidth {
animation: hideshow 5s ease infinite;
}
#keyframes hideshow {
from { stroke-width="2"; }
to { stroke-width="6;"; }
}
It's CSS syntax inside #keyframes so something like:
#keyframes hideshow {
from { stroke-width: 2; }
to { stroke-width: 6; }
}