Browse Source

adding animations

change list
master
nirgendswo 7 years ago
parent
commit
2d505a9080
3 changed files with 43 additions and 2 deletions
  1. +40
    -0
      scss/components/_animation.scss
  2. +2
    -2
      scss/components/_list.scss
  3. +1
    -0
      scss/crispyBoilerplate.scss

+ 40
- 0
scss/components/_animation.scss View File

@ -0,0 +1,40 @@
/**
* animation
*
*
*
* @author Björn Hase
*
*/
@mixin crispy-boilerplate-animation() {
.--animation-rotate {
animation: spin 3s linear infinite;
@keyframes spin {
to {
transform: rotate(360deg);
}
}
}
.--animation-shake {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
}
}

+ 2
- 2
scss/components/_list.scss View File

@ -25,11 +25,11 @@
.d-list {
&--horizontal {
.d-list__title, .d-list__content {
dt, dd {
float: left;
}
.d-list__content {
dd {
clear: left;
}
}


+ 1
- 0
scss/crispyBoilerplate.scss View File

@ -9,6 +9,7 @@
'mixins/list',
'components/align',
'components/animations',
'components/body',
'components/button',
'components/heading',


Loading…
Cancel
Save