mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Finish animations
This commit is contained in:
Jeremy Thomas
parent
823a100d51
commit
3c68b35bfe
@ -49,8 +49,8 @@
|
|||||||
<p class="subtitle is-6">
|
<p class="subtitle is-6">
|
||||||
Built with <strong>Flexbox</strong>
|
Built with <strong>Flexbox</strong>
|
||||||
</p>
|
</p>
|
||||||
<figure class="bd-focus-css3 bd-focus-icon">
|
<figure class="bd-focus-icon">
|
||||||
<span class="icon is-large">
|
<span class="bd-focus-css3 icon is-large">
|
||||||
<i class="fab fa-3x fa-css3"></i>
|
<i class="fab fa-3x fa-css3"></i>
|
||||||
</span>
|
</span>
|
||||||
</figure>
|
</figure>
|
||||||
@ -63,8 +63,8 @@
|
|||||||
<p class="subtitle is-6">
|
<p class="subtitle is-6">
|
||||||
Open source on <strong>GitHub</strong>
|
Open source on <strong>GitHub</strong>
|
||||||
</p>
|
</p>
|
||||||
<figure class="bd-focus-github bd-focus-icon">
|
<figure class="bd-focus-icon">
|
||||||
<span class="icon is-large">
|
<span class="bd-focus-github icon is-large">
|
||||||
<i class="fab fa-3x fa-github-alt"></i>
|
<i class="fab fa-3x fa-github-alt"></i>
|
||||||
</span>
|
</span>
|
||||||
</figure>
|
</figure>
|
||||||
|
|||||||
@ -4,34 +4,88 @@
|
|||||||
to
|
to
|
||||||
transform: scale(1)
|
transform: scale(1)
|
||||||
|
|
||||||
|
@keyframes bdSlideDown
|
||||||
|
from
|
||||||
|
opacity: 0
|
||||||
|
transform: translateY(-1rem)
|
||||||
|
to
|
||||||
|
opacity: 1
|
||||||
|
transform: translateY(0)
|
||||||
|
|
||||||
|
@keyframes bdSlideUp
|
||||||
|
from
|
||||||
|
opacity: 0
|
||||||
|
transform: translateY(1rem)
|
||||||
|
to
|
||||||
|
opacity: 1
|
||||||
|
transform: translateY(0)
|
||||||
|
|
||||||
$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
|
$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
|
||||||
$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
|
$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
|
||||||
$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||||
|
|
||||||
|
$duration: 500ms
|
||||||
$delay: 250ms
|
$delay: 250ms
|
||||||
|
$wait: 500ms
|
||||||
|
|
||||||
%bd-focus-animation
|
%bd-focus-animation
|
||||||
animation-duration: 500ms
|
|
||||||
animation-fill-mode: both
|
animation-fill-mode: both
|
||||||
animation-timing-function: $cubic-less-dramatic
|
animation-timing-function: $cubic-less-dramatic
|
||||||
transform-origin: center center
|
transform-origin: center center
|
||||||
|
|
||||||
.bd-focus-mobile,
|
$delay-subtitle: $delay / 2
|
||||||
.bd-focus-tablet,
|
|
||||||
.bd-focus-desktop
|
// Titles
|
||||||
|
.bd-focus-item
|
||||||
|
.title
|
||||||
|
@extend %bd-focus-animation
|
||||||
|
animation-duration: $duration
|
||||||
|
animation-name: bdSlideDown
|
||||||
|
.subtitle
|
||||||
|
@extend %bd-focus-animation
|
||||||
|
animation-duration: $duration
|
||||||
|
animation-name: bdSlideUp
|
||||||
|
&:nth-child(1)
|
||||||
|
.subtitle
|
||||||
|
animation-delay: $delay-subtitle
|
||||||
|
&:nth-child(2)
|
||||||
|
.title
|
||||||
|
animation-delay: $wait
|
||||||
|
.subtitle
|
||||||
|
animation-delay: $wait + $delay-subtitle
|
||||||
|
&:nth-child(3)
|
||||||
|
.title
|
||||||
|
animation-delay: ($wait * 2)
|
||||||
|
.subtitle
|
||||||
|
animation-delay: ($wait * 2) + $delay-subtitle
|
||||||
|
&:nth-child(4)
|
||||||
|
.title
|
||||||
|
animation-delay: ($wait * 3)
|
||||||
|
.subtitle
|
||||||
|
animation-delay: ($wait * 3) + $delay-subtitle
|
||||||
|
|
||||||
|
// Devices
|
||||||
|
%bd-focus-animation-device
|
||||||
@extend %bd-focus-animation
|
@extend %bd-focus-animation
|
||||||
|
animation-duration: $duration
|
||||||
animation-name: bdGrow
|
animation-name: bdGrow
|
||||||
transform-origin: bottom center
|
transform-origin: bottom center
|
||||||
|
|
||||||
|
.bd-focus-mobile
|
||||||
|
@extend %bd-focus-animation-device
|
||||||
|
|
||||||
.bd-focus-tablet
|
.bd-focus-tablet
|
||||||
|
@extend %bd-focus-animation-device
|
||||||
animation-delay: $delay
|
animation-delay: $delay
|
||||||
|
|
||||||
.bd-focus-desktop
|
.bd-focus-desktop
|
||||||
|
@extend %bd-focus-animation-device
|
||||||
animation-delay: $delay * 2
|
animation-delay: $delay * 2
|
||||||
|
|
||||||
|
// Cubes
|
||||||
$cube-factor: 10px
|
$cube-factor: 10px
|
||||||
|
|
||||||
@keyframes moveCube1
|
@keyframes bdCube1
|
||||||
0%
|
0%
|
||||||
transform: translate3d(0, (-5 * $cube-factor), 0)
|
transform: translate3d(0, (-5 * $cube-factor), 0)
|
||||||
opacity: 0
|
opacity: 0
|
||||||
@ -39,7 +93,7 @@ $cube-factor: 10px
|
|||||||
transform: translate3d(0, 0, 0)
|
transform: translate3d(0, 0, 0)
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
@keyframes moveCube2
|
@keyframes bdCube2
|
||||||
0%
|
0%
|
||||||
transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
|
transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
|
||||||
opacity: 0
|
opacity: 0
|
||||||
@ -47,7 +101,7 @@ $cube-factor: 10px
|
|||||||
transform: translate3d(0, 0, 0)
|
transform: translate3d(0, 0, 0)
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
@keyframes moveCube3
|
@keyframes bdCube3
|
||||||
0%
|
0%
|
||||||
transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
|
transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
|
||||||
opacity: 0
|
opacity: 0
|
||||||
@ -57,74 +111,98 @@ $cube-factor: 10px
|
|||||||
|
|
||||||
%bd-focus-animation-cube
|
%bd-focus-animation-cube
|
||||||
@extend %bd-focus-animation
|
@extend %bd-focus-animation
|
||||||
animation-iteration-count: infinite
|
|
||||||
animation-direction: alternate
|
animation-direction: alternate
|
||||||
animation-duration: 2000ms
|
animation-duration: $duration * 4
|
||||||
|
animation-iteration-count: infinite
|
||||||
|
|
||||||
.bd-focus-cube-1
|
.bd-focus-cube-1
|
||||||
@extend %bd-focus-animation-cube
|
@extend %bd-focus-animation-cube
|
||||||
animation-name: moveCube1
|
animation-delay: $wait
|
||||||
|
animation-name: bdCube1
|
||||||
|
|
||||||
.bd-focus-cube-2
|
.bd-focus-cube-2
|
||||||
@extend %bd-focus-animation-cube
|
@extend %bd-focus-animation-cube
|
||||||
animation-name: moveCube2
|
animation-name: bdCube2
|
||||||
animation-delay: $delay
|
animation-delay: $wait + $delay
|
||||||
|
|
||||||
.bd-focus-cube-3
|
.bd-focus-cube-3
|
||||||
@extend %bd-focus-animation-cube
|
@extend %bd-focus-animation-cube
|
||||||
animation-name: moveCube3
|
animation-name: bdCube3
|
||||||
animation-delay: $delay * 2
|
animation-delay: $wait + ($delay * 2)
|
||||||
|
|
||||||
@keyframes bdJellyGrow
|
@keyframes fadeIn
|
||||||
|
from
|
||||||
|
opacity: 0
|
||||||
|
transform: scale(0)
|
||||||
|
to
|
||||||
|
opacity: 1
|
||||||
|
transform: scale(1)
|
||||||
|
|
||||||
|
.bd-focus-css3
|
||||||
|
@extend %bd-focus-animation
|
||||||
|
animation-delay: $wait * 2
|
||||||
|
animation-duration: $duration
|
||||||
|
animation-name: fadeIn
|
||||||
|
|
||||||
|
.bd-focus-github
|
||||||
|
@extend %bd-focus-animation
|
||||||
|
animation-delay: $wait * 3
|
||||||
|
animation-duration: $duration * 3
|
||||||
|
animation-name: bdJellyPop
|
||||||
|
|
||||||
|
@keyframes bdJellyPop
|
||||||
0%
|
0%
|
||||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
opacity: 0
|
||||||
|
transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
3.4%
|
3.4%
|
||||||
transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
opacity: 1
|
||||||
|
transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
4.7%
|
4.7%
|
||||||
transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
6.81%
|
6.81%
|
||||||
transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
9.41%
|
9.41%
|
||||||
transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
10.21%
|
10.21%
|
||||||
transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
13.61%
|
13.61%
|
||||||
transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
14.11%
|
14.11%
|
||||||
transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
17.52%
|
17.52%
|
||||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
18.72%
|
18.72%
|
||||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
21.32%
|
21.32%
|
||||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
24.32%
|
24.32%
|
||||||
transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
25.23%
|
25.23%
|
||||||
transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
29.03%
|
29.03%
|
||||||
transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
29.93%
|
29.93%
|
||||||
transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
35.54%
|
35.54%
|
||||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
36.74%
|
36.74%
|
||||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
41.04%
|
41.04%
|
||||||
transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
44.44%
|
44.44%
|
||||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
52.15%
|
52.15%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
59.86%
|
59.86%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
63.26%
|
63.26%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
75.28%
|
75.28%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
85.49%
|
85.49%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
90.69%
|
90.69%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
100%
|
100%
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
opacity: 1
|
||||||
|
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||||
|
|||||||
@ -142,19 +142,53 @@
|
|||||||
.bd-focus-item
|
.bd-focus-item
|
||||||
border-radius: $radius-large
|
border-radius: $radius-large
|
||||||
padding-top: 1.25rem
|
padding-top: 1.25rem
|
||||||
transition-duration: $speed * 2
|
position: relative
|
||||||
transition-property: background-color
|
.title a,
|
||||||
.subtitle
|
.subtitle
|
||||||
color: $grey-light
|
|
||||||
strong
|
|
||||||
color: currentColor
|
|
||||||
.title
|
|
||||||
transition-duration: $speed * 2
|
transition-duration: $speed * 2
|
||||||
transition-property: color
|
transition-property: color
|
||||||
&:hover
|
.title
|
||||||
|
position: relative
|
||||||
|
transition-duration: $speed * 2
|
||||||
|
transition-property: color
|
||||||
|
.subtitle
|
||||||
|
color: $grey-light
|
||||||
|
position: relative
|
||||||
|
strong
|
||||||
|
color: currentColor
|
||||||
|
&::before
|
||||||
|
+overlay
|
||||||
background-color: $white-bis
|
background-color: $white-bis
|
||||||
|
border-radius: $radius-large
|
||||||
|
content: ""
|
||||||
|
display: block
|
||||||
|
opacity: 0
|
||||||
|
pointer-events: none
|
||||||
|
transform: scale(1.1)
|
||||||
|
transform-origin: center
|
||||||
|
transition-duration: $speed * 2
|
||||||
|
transition-property: opacity, transform
|
||||||
|
&:hover
|
||||||
|
&::before
|
||||||
|
opacity: 1
|
||||||
|
transform: scale(1)
|
||||||
|
.subtitle
|
||||||
|
color: $text
|
||||||
|
&:nth-child(1):hover
|
||||||
|
.title
|
||||||
|
color: $orange
|
||||||
|
&:nth-child(2):hover
|
||||||
|
.title
|
||||||
|
color: $success
|
||||||
|
&:nth-child(3):hover
|
||||||
.title
|
.title
|
||||||
color: $link
|
color: $link
|
||||||
|
&:nth-child(4):hover
|
||||||
|
.title
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
.bd-focus-icon
|
||||||
|
position: relative
|
||||||
|
|
||||||
.bd-focus-mobile
|
.bd-focus-mobile
|
||||||
color: $purple
|
color: $purple
|
||||||
@ -172,6 +206,7 @@
|
|||||||
position: relative
|
position: relative
|
||||||
height: 3rem
|
height: 3rem
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
|
top: -0.5rem
|
||||||
width: 3rem
|
width: 3rem
|
||||||
|
|
||||||
.bd-focus-cube
|
.bd-focus-cube
|
||||||
|
|||||||
@ -133,7 +133,7 @@
|
|||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
|
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
|
||||||
.bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
|
.bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -10487,31 +10487,72 @@ svg {
|
|||||||
.bd-focus-item {
|
.bd-focus-item {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding-top: 1.25rem;
|
padding-top: 1.25rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item .title a,
|
||||||
|
.bd-focus-item .subtitle {
|
||||||
transition-duration: 172ms;
|
transition-duration: 172ms;
|
||||||
transition-property: background-color;
|
transition-property: color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item .title {
|
||||||
|
position: relative;
|
||||||
|
transition-duration: 172ms;
|
||||||
|
transition-property: color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-item .subtitle {
|
.bd-focus-item .subtitle {
|
||||||
color: #b5b5b5;
|
color: #b5b5b5;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-item .subtitle strong {
|
.bd-focus-item .subtitle strong {
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-item .title {
|
.bd-focus-item::before {
|
||||||
transition-duration: 172ms;
|
|
||||||
transition-property: color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-focus-item:hover {
|
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
|
border-radius: 6px;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: scale(1.1);
|
||||||
|
transform-origin: center;
|
||||||
|
transition-duration: 172ms;
|
||||||
|
transition-property: opacity, transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-item:hover .title {
|
.bd-focus-item:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:hover .subtitle {
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(1):hover .title {
|
||||||
|
color: #ff470f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(2):hover .title {
|
||||||
|
color: #23d160;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(3):hover .title {
|
||||||
color: #3273dc;
|
color: #3273dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(4):hover .title {
|
||||||
|
color: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-icon {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.bd-focus-mobile {
|
.bd-focus-mobile {
|
||||||
color: #b86bff;
|
color: #b86bff;
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
@ -10531,6 +10572,7 @@ svg {
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
top: -0.5rem;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -13105,18 +13147,74 @@ svg {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-mobile,
|
@keyframes bdSlideDown {
|
||||||
.bd-focus-tablet,
|
from {
|
||||||
.bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
|
opacity: 0;
|
||||||
animation-duration: 500ms;
|
transform: translateY(-1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bdSlideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-mobile,
|
.bd-focus-item .title {
|
||||||
.bd-focus-tablet,
|
animation-duration: 500ms;
|
||||||
.bd-focus-desktop {
|
animation-name: bdSlideDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item .subtitle {
|
||||||
|
animation-duration: 500ms;
|
||||||
|
animation-name: bdSlideUp;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(1) .subtitle {
|
||||||
|
animation-delay: 125ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(2) .title {
|
||||||
|
animation-delay: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(2) .subtitle {
|
||||||
|
animation-delay: 625ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(3) .title {
|
||||||
|
animation-delay: 1000ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(3) .subtitle {
|
||||||
|
animation-delay: 1125ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(4) .title {
|
||||||
|
animation-delay: 1500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-item:nth-child(4) .subtitle {
|
||||||
|
animation-delay: 1625ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
|
||||||
|
animation-duration: 500ms;
|
||||||
animation-name: bdGrow;
|
animation-name: bdGrow;
|
||||||
transform-origin: bottom center;
|
transform-origin: bottom center;
|
||||||
}
|
}
|
||||||
@ -13129,7 +13227,7 @@ svg {
|
|||||||
animation-delay: 500ms;
|
animation-delay: 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes moveCube1 {
|
@keyframes bdCube1 {
|
||||||
0% {
|
0% {
|
||||||
transform: translate3d(0, -50px, 0);
|
transform: translate3d(0, -50px, 0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -13140,7 +13238,7 @@ svg {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes moveCube2 {
|
@keyframes bdCube2 {
|
||||||
0% {
|
0% {
|
||||||
transform: translate3d(-40px, 30px, 0);
|
transform: translate3d(-40px, 30px, 0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -13151,7 +13249,7 @@ svg {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes moveCube3 {
|
@keyframes bdCube3 {
|
||||||
0% {
|
0% {
|
||||||
transform: translate3d(40px, 30px, 0);
|
transform: translate3d(40px, 30px, 0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -13163,102 +13261,129 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
|
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-direction: alternate;
|
animation-direction: alternate;
|
||||||
animation-duration: 2000ms;
|
animation-duration: 2000ms;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-cube-1 {
|
.bd-focus-cube-1 {
|
||||||
animation-name: moveCube1;
|
animation-delay: 500ms;
|
||||||
|
animation-name: bdCube1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-cube-2 {
|
.bd-focus-cube-2 {
|
||||||
animation-name: moveCube2;
|
animation-name: bdCube2;
|
||||||
animation-delay: 250ms;
|
animation-delay: 750ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-focus-cube-3 {
|
.bd-focus-cube-3 {
|
||||||
animation-name: moveCube3;
|
animation-name: bdCube3;
|
||||||
animation-delay: 500ms;
|
animation-delay: 1000ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bdJellyGrow {
|
@keyframes fadeIn {
|
||||||
0% {
|
from {
|
||||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
}
|
}
|
||||||
3.4% {
|
to {
|
||||||
transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
opacity: 1;
|
||||||
}
|
transform: scale(1);
|
||||||
4.7% {
|
}
|
||||||
transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
}
|
||||||
}
|
|
||||||
6.81% {
|
.bd-focus-css3 {
|
||||||
transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
animation-delay: 1000ms;
|
||||||
}
|
animation-duration: 500ms;
|
||||||
9.41% {
|
animation-name: fadeIn;
|
||||||
transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
}
|
||||||
}
|
|
||||||
10.21% {
|
.bd-focus-github {
|
||||||
transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
animation-delay: 1500ms;
|
||||||
}
|
animation-duration: 1500ms;
|
||||||
13.61% {
|
animation-name: bdJellyPop;
|
||||||
transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
}
|
||||||
}
|
|
||||||
14.11% {
|
@keyframes bdJellyPop {
|
||||||
transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
0% {
|
||||||
}
|
opacity: 0;
|
||||||
17.52% {
|
transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
}
|
||||||
}
|
3.4% {
|
||||||
18.72% {
|
opacity: 1;
|
||||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
21.32% {
|
4.7% {
|
||||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
24.32% {
|
6.81% {
|
||||||
transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
25.23% {
|
9.41% {
|
||||||
transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
29.03% {
|
10.21% {
|
||||||
transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
29.93% {
|
13.61% {
|
||||||
transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
35.54% {
|
14.11% {
|
||||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
36.74% {
|
17.52% {
|
||||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
41.04% {
|
18.72% {
|
||||||
transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
44.44% {
|
21.32% {
|
||||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
52.15% {
|
24.32% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
59.86% {
|
25.23% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
63.26% {
|
29.03% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
75.28% {
|
29.93% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
85.49% {
|
35.54% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
90.69% {
|
36.74% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
100% {
|
41.04% {
|
||||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
44.44% {
|
||||||
|
transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
52.15% {
|
||||||
|
transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
59.86% {
|
||||||
|
transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
63.26% {
|
||||||
|
transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
75.28% {
|
||||||
|
transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
85.49% {
|
||||||
|
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
90.69% {
|
||||||
|
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user