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);}
}
Related
I am trying to to highlight a word in HTML5 using a SVG masking technique.
This is the CSS code I am using to achieve the animation on the SVG path:
#keyframes dash {
from {
stroke-dashoffset: 530;
}
to {
stroke-dashoffset: 0;
}
}
.shape path {
stroke-dasharray: 530;
stroke-dashoffset: 0;
fill: white;
opacity: 0;
}
.shape.active path {
opacity: 1;
animation: dash .5s ease-in forwards;
}
Overall, it works well. However, it shows a white fill background while the animation is played:
How can I make this transparent so it can work on any background colour?
Here is a link to the code where you can see the animation in action: https://codepen.io/willhalling/pen/QWpXpQa
EDITED: I've updated codepen link to include #enxaneta solution
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" -->
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 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; }
}