I am making a map of Brazil country with SVG and I have a doubt of style. Here is the map snippet. I'd like to put a spacing between States like the example image below:
How can I do this?
To add the spacing between states, use stroke-width:
.mapa-svg-estados {
stroke: var(--default-strok);
stroke-width:3px;
}
To keep the animated line drawing, which also uses stroke-width, use animation rather than transition:
.mapa-svg-estados-active {
cursor: pointer;
stroke: var(--default-blue-stroke);
stroke-dasharray: 180%;
stroke-dashoffset: -120%;
fill: var(--default-grey-black-fill);
animation:outline 0.8s ease forwards;
}
#keyframes outline {
from {}
to {
stroke-dashoffset: 0%;
}
}
I made a working fork from your CodePen here.
P.S. you have a typo --default-strok => --default-stroke ;)
Related
I'm using primeng version 11, and I'm trying to change the color of the spinner bar, I tried copying the code form primeng but it did not work for me.
html:
<p-progressSpinner [style]="{width: '50px', height: '50px'}" styleClass="custom-spinner"></p-progressSpinner>
css:
#keyframes custom-progress-spinner-color {
100%,
0% {
stroke: #16697A;
}
40% {
stroke: #489FB5;
}
66% {
stroke: #82C0CC;
}
80%,
90% {
stroke: #FFA62B;
}
}
module is imported and checked everything.
You can just use the same class name, no need for a new one:
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styles: [`
#keyframes p-progress-spinner-color {
from {
stroke: #yourColor;
}
to {
stroke: #yourColor;
}
}
`]
})
Even you can use 'from' and 'to' which are equivalent to percentages... cheers!!!
See the doc for reference
I had the same issue, the only thing I could do was to override the CSS rule for stroke color with important. Then you only have one color and no gradient but at least that worked:
.p-progress-spinner-circle {
stroke: #yourColor !important;
}
You should putt the following CSS (In my example it's SASS) before your '#keyframes' code block:
.ui-progress-spinner {
&.custom-spinner {
.ui-progress-spinner-circle {
animation:
ui-progress-spinner-dash 1.5s ease-in-out infinite,
custom-progress-spinner-color 6s ease-in-out infinite;
}
}
}
I've used the following CSS taken from here.
:host {
animation: rotation 2s infinite linear;
border: 10px solid yellow;
}
#keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
I don't get to see any rotation, although I can see the border, so I know that I target the correct element. I don't think it's required to have an IMG (and mine is a custom thingy in Angular). It works on the IMG and also on a DIV. Not sure how to diagnose it further as rotations/animations aren't my strongest suite.
One approach is to put the custom component in a DIV and rotate that. However, it does rotate around the middle of the screen (wiiiide circle) instead of spinning around itself.
<div id="loading">
<my-icon-globe></my-icon-globe>
</div>
#loading { animation: rotation 2s infinite linear; }
#keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
You can adjust transform-origin of the DIV if you attempt the second approach.
I'm attempting to animate an SVG line icon ONLY on hover. I'd like it to be static when not hovered. I've worked out how to animate the drawing effect, and I can get it kind of working on hover.. however when it's going between the 'from' and 'to' keyframes, the dashes get smaller and it doesn't create the smooth drawing effect I was hoping for. I am doing this purely HTML/CSS.
.bell_line:hover {
animation: draw 3s linear forwards;
}
#keyframes draw {
from {
stroke-dashoffset:92;
stroke-dasharray: 92;
}
to {
stroke-dashoffset:0;
stroke-dasharray: 0;
}
}
<div class="bell_line" style="margin-left: 100px;margin-top: 100px;">
<svg class="bell_line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.85 38.83">
<g data-name="bell_line" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10">
<path class="bell_line" d="M18.43 28.41l5.38-14.11v-3a5.62 5.62 0 0111.23 0v3l5.33 14.11zM29.38 5.67V.5M29.38 33.2v5.13"/>
</g>
</svg>
</div>
Would transition solve your issue? I usually find it a simpler solution for hover states.
Your css would end up looking like this,
.bell_line {
fill: none;
stroke: black;
stroke-dashoffset: 0;
stroke-dasharray: 0;
transition: stroke-dashoffset 2s ease;
}
.bell_line:hover {
stroke-dashoffset: 92;
}
OR if you want to animate two states (in your case draw off draw on) you will need to create an animation that draws off the dashoffet by its halfway point, then redraws it by it's completion.
Like so,
#keyframes draw {
0% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 90;
}
100% {
stroke-dashoffset: 180;
}
}
.bell_line {
fill: none;
stroke: black;
stroke-dashoffset: 0;
stroke-dasharray: 90;
}
.bell_line:hover {
animation: draw 2s linear forwards;
}
Here we only animate the dashoffset to produce the animation effect then reset the
Here's a working example,
https://stackblitz.com/edit/react-bell-line
https://react-bell-line.stackblitz.io
Also just be mindful that the hover state is on the path. You could always make the hover state on the svg then point to the path.
svg:hover > .bell_line
This would just mean you can create a larger area to target with the mouse.
I try to find a way to draw an animated dash line like HERE.
The problem with this solution is, that a black line is drawn underneath a dashed white line. The thing is, I want to have the middle parts (the spaces between the dashes) transparent, to put this animation on the top of a map image, not filled with color's (like white in this example).
I tried with different set ups of the stroke-dasharray and stroke-dashoffset attribute, but all this results were not like the way I search for.
Currently I embed a svg object directly in my HTML document. The svg tag includes the path tag, which is recommended for the path itself. The animation I try to realize with simple css animation key frames like:
#keyframes dash
{
from
{
stroke-dashoffset: 1000;
}
to
{
stroke-dashoffset: 0;
}
}
The space between the dashes is by default transparent.
Is there something your doing to change the color?
svg {
background-image: linear-gradient(45deg, red, blue);
}
svg circle {
fill: pinK;
stroke: rgba(0, 0, 0, 0.9);
stroke-width: 10px;
stroke-dasharray: 5;
stroke-dashoffset: 0;
animation: test 10s;
-webkit-animation: test 10s;
}
#keyframes test {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 200;
}
}
#-webkit-keyframes test {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 200;
}
}
<svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>
I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.
When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.
Here's my element and animation: http://jsfiddle.net/2Lwftq6r/
HTML:
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
CSS:
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
transform: translateX(0);
}
#anim:checked ~ div {
-webkit-animation: dance 2s infinite ease-in-out;
-moz-animation: dance 2s infinite ease-in-out;
}
#-webkit-keyframes dance {
0%, 100% { -webkit-transform: translateX(0); }
50% { -webkit-transform: translateX(300px); }
}
#-moz-keyframes dance {
0%, 100% { -moz-transform: translateX(0); }
50% { -moz-transform: translateX(300px); }
}
I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution:
So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:
#Spatula:hover{
animation-direction:alternate;
transform: translate(1.2cm,1cm);
transition: all 1.5s;
-webkit-transition: all 1.5s;
}
#Spatula{
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
Good luck!
You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):
HTML:
<input type="checkbox" id="anim-input">
<label for="anim-input">Start / stop animation</label>
<div class="anim-div"></div>
CSS:
.anim-div {
margin-top: 50px;
width: 50px;
height: 10px;
background: #000;
}
.anim-div_active {
-webkit-animation: moving 2s ease-in-out infinite alternate;
animation: moving 2s ease-in-out infinite alternate;
}
.anim-div_return {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
#-webkit-keyframes moving {
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(300px); }
}
#keyframes moving {
0% { transform: translateX(0); }
100% { transform: translateX(300px); }
}
Javascript:
$('#anim-input').on('change', function() {
var $animDiv = $('.anim-div');
if (this.checked) {
$animDiv.removeClass('anim-div_return')
.addClass('anim-div_active');
return;
}
var transformValue = $animDiv.css('webkitTransform') ||
$animDiv.css('transform');
$animDiv.css({'webkitTransform': transformValue,
'transform': transformValue})
.removeClass('anim-div_active');
requestAnimationFrame(function() {
$animDiv.addClass('anim-div_return')
.css({'webkitTransform': 'translateX(0)',
'transform': 'translateX(0)'});
});
});
P.S.
Vendor prefixes are based on actual browsers list from http://caniuse.com.
Check out This StackOverflow question.
You aren't going to like this answer, but reality is that CSS3
animations aren't really useful to achieve this. To make this work you
would need to replicate a lot of your CSS in your Javascript which
kind of destroys the point (Like for example in this closely related
answer
Change speed of animation CSS3?).
To really make it stop smoothly your best bet would be to write the
animation on a platform like the Greensock animation library
which provides all the tools you need to make it actually smoothly
stop instead of suddenly stop.
There's also another answer below it that does make an effort at using CSS, you can look at that one.
There is also an alternate solution, it might not give you the desired effect of going back to it's original state, but since nobody mentioned it and this problem seems to have no solution, it's possible to pause the animation purely in css, locking it's state until it's started again
To pause the animation you need first to make the animation available even when the checkbox is not checked
And make use of the animation-play-state property
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
animation: dance 2s infinite ease-in-out paused;
}
#anim:checked ~ div {
animation-play-state: running;
}
#keyframes dance {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(300px); }
}
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>