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; }
}
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
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'm looking for a solution to use a mixin for browser-specific CSS hacks.
I'm using JavaScript to add the browser tag in the HTML class. Like .ie .ie7 .ie8 .ie9
I would like to use the mixin like:
.box-test {
margin: 10px;
#include browser(ie7) {
margin: 20px;
}
}
DESIRED OUTPUT:
.box-test {
margin: 10px;
}
.ie7 .box-test {
margin: 20px;
}
the mixin i tried to make:
#mixin browser($browserVar) {
#if $browserVar == ie7 {
.ie7 { #content }
}
#else if $browserVar == ie8 {
.ie8 { #content; }
}
#else if $browserVar == ie9 {
.ie9 { #content; }
}
}
the problem is the output is:
.box-test {
margin: 10px; }
.box-test .ie7 {
margin: 20px; }
The absolute simplest mixin would be like so:
#mixin legacy-ie($ver: 7) {
.ie#{$ver} & {
#content;
}
}
Output:
.baz {
background: #CCC;
#include legacy-ie {
background: black;
}
}
If you wanted to emit styles that work for multiple IE versions at once without duplication, then this would be one way to do it:
$default-legacy-ie: 7 8 9 !default;
#mixin legacy-ie($versions: $default-legacy-ie) {
$sel: ();
#each $v in $versions {
$sel: append($sel, unquote('.ie#{$v} &'), comma);
}
#{$sel} {
#content;
}
}
.foo {
background: red;
#include legacy-ie {
background: green;
}
}
.bar {
background: yellow;
#include legacy-ie(7 8) {
background: orange;
}
}
Output:
.foo {
background: red;
}
.ie7 .foo, .ie8 .foo, .ie9 .foo {
background: green;
}
.bar {
background: yellow;
}
.ie7 .bar, .ie8 .bar {
background: orange;
}
If you want to be able to suppress all of the IE kludges all you need to add is one variable and an #if block:
$enable-legacy-ie: true !default;
#mixin legacy-ie($ver: 7) {
#if $enable-legacy-ie {
.ie#{$ver} & {
#content;
}
}
}
Set $enable-legacy-ie to false at the top of the file you don't want to have the IE specific styles, set it to true if you do want the styles included. You could easily write a reverse mixin to hide styles that old IE can't make use of so that the IE specific file stays nice and small.
You're overcomplicating things. :) It could be as simple as that:
.box-test {
margin: 10px;
.ie-7 & {
margin: 20px; } }
Result:
.box-test {
margin: 10px;
}
.ie-7 .box-test {
margin: 20px;
}
I have tried adding mixin for "#-moz-document url-prefix()" FF hack but it was not recognized by SASS and SASS was throwing error. so I think better solution is to create _hack.sass file and add css hacks which will not be compiled by SASS. I include this file whenever required.
#import "hack";
I am adding answer this as I feel it will be useful to someone who is struggling to get mozilla/safari hack works.