spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

svg animation Chrome 64 support

pull/650/head
gabrielburnworth 2018-01-29 18:28:51 -08:00
parent 1f5d86e46b
commit 9032189e96
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webpack/css/farm_designer/farm_designer.scss
View File

@ -192,6 +192,7 @@
.hovered-plant-copy {
cursor: pointer;
transform-origin: center;
transform-box: fill-box;
}
.plant-link-wrapper {
@ -214,10 +215,12 @@
.plant-indicator.is-chosen-true {
animation: plant-selection-pop 0.2s 1 cubic-bezier(0, 0, 0, 0.9), pulse-and-rotate 4s 0.2s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
.plant-image {
transform-origin: bottom;
transform-box: fill-box;
&.animate {
animation: plant-growth 0.25s cubic-bezier(0, 0, 0, 1.4);
}
@ -226,10 +229,12 @@
.soil-cloud {
animation: soil-poof 0.5s cubic-bezier(0, 0, 0, 1);
transform-origin: center;
transform-box: fill-box;
}
.spread {
transform-origin: center;
transform-box: fill-box;
pointer-events: none;
&.animate {
animation: spread-pop 0.2s cubic-bezier(0, 0, 0, 1);
@ -246,6 +251,7 @@
animation-iteration-count: infinite;
animation-name: water-spray-animation;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
}
}
@ -270,6 +276,7 @@
animation-iteration-count: infinite;
animation-name: vacuum-animation;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
}
}

4
webpack/css/loading_plant.scss
View File

@ -17,6 +17,7 @@ $duration: 2;
.loading-plant {
transform: scale(1);
transform-origin: bottom;
transform-box: fill-box;
animation: loading-plant-pop $duration*0.3s cubic-bezier(0, 0, 0, 1.3);
}
@ -33,6 +34,7 @@ $duration: 2;
.loading-plant-leaf {
transform-origin: center;
transform-box: fill-box;
transform: scale(1);
opacity: 1;
animation: loading-plant-leaf-pop $duration*0.5s cubic-bezier(0, 0, 0, 1) 1;
@ -51,6 +53,7 @@ $duration: 2;
.loading-plant-accent {
transform-origin: center;
transform-box: fill-box;
transform: scale(1);
opacity: 1;
animation: loading-plant-accent-pop $duration*0.5s cubic-bezier(0, 0, 0, 1.4) 1 ;
@ -73,6 +76,7 @@ $duration: 2;
.loading-plant-circle {
transform-origin: center;
transform-box: fill-box;
animation:
loading-plant-circle-pop $duration*0.3s cubic-bezier(0, 0, 0, 1.4) 1,
loading-plant-circle $duration*3s linear infinite $duration*0.3s;