Анимация заполнения водой
1,00
р.
Я пытаюсь сделать анимацию, чтобы круг выглядел так, будто он наполняется водой.
Я столкнулся с двумя ошибками и не смог даже преодолеть третью:
Использовать заполнение (fill) это неправильное решение. Круг возвращается до пустого (черного) цвета после его заполнения На данный момент я использую теги , но я хотел бы переместить этот эффект в body {background-image:} и нужно какое-то направление, как это сделать.
То, что я пробовал до сих пор: http://jsfiddle.net/um0rnL56/1/
#banner {
width: 300px
height: 300px
position: relative
}
#banner div {
position: absolute
}
#banner div:nth-child(2) {
-webkit-animation: wipe 6s
-webkit-animation-delay: 0s
-webkit-animation-direction: up
-webkit-mask-size: 300px 3000px
-webkit-mask-position: 300px 300px
-webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)))
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0
}
100% {
-webkit-mask-position: 300px 300px
}
}
Источник: Filling water animation @Arian Faurtosh
Ответ
Вот четыре разных варианта:
1. Используя Easing
Если вы заполняете жидкостью круглую чашу, то она будет заполняться быстрее внизу и сверху, чем в середине (потому что в более широкой средней части больше места для покрытия) Итак, с учетом этого грубого объяснения, анимация должна: начинаться быстро, замедляться посередине, а затем быстро заканчиваться, когда чаша сужается снова наверху.
Для этого мы можем использовать функцию easing CSS3: cub-bezier (.2, .6, .8, .4).
Посмотрите пример ниже.
(Если вы хотите настроить easing здесь, то вот отличный ресурс: http://cubic-bezier.com/#.2,.6,.8,.4)
#banner {
width: 150px
height: 150px
position: relative
background: #000
border-radius: 50%
overflow: hidden
}
#banner::before {
content: ''
position: absolute
background: #04ACFF
width: 100%
bottom: 0
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards
}
@keyframes wipe {
0% {
height: 0
}
100% {
height: 100%
}
2. SVG Deliciousness
Давайте сделаем еще один шаг вперед. Допустим, мы захотим добавить волнистую поверхность на «воду» с помощью CSS. Мы можем сделать это, используя SVG. Я создал волнистый SVG image в Adobe Illustrator, а затем анимировал image, чтобы перемещать его слева направо в цикле с отдельной анимацией CSS:
Пример
#banner {
border-radius: 50%
width: 150px
height: 150px
background: #000
overflow: hidden
backface-visibility: hidden
transform: translate3d(0, 0, 0)
}
#banner .fill {
animation-name: fillAction
animation-iteration-count: 1
animation-timing-function: cubic-bezier(.2, .6, .8, .4)
animation-duration: 4s
animation-fill-mode: forwards
}
#banner #waveShape {
animation-name: waveAction
animation-iteration-count: infinite
animation-timing-function: linear
animation-duration: 0.5s
width:300px
height: 150px
fill: #04ACFF
}
@keyframes fillAction {
0% {
transform: translate(0, 150px)
}
100% {
transform: translate(0, -5px)
}
}
@keyframes waveAction {
0% {
transform: translate(-150px, 0)
}
100% {
transform: translate(0, 0)
}
}
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
3. С линией наполнения
Этот пример включает линию заливки (большинство чаш заполняется сверху, а не снизу). Линия заливки сначала анимируется сверху вниз, в то время как свойство animation-delay предотвращает выполнение анимации заливки до завершения заливки.
#banner {
border-radius: 50%
width: 150px
height: 150px
background: #000
overflow: hidden
backface-visibility: hidden
transform: translate3d(0, 0, 0)
position: relative
}
#banner .fill {
transform: translateY(150px)
animation-name: fillAction
animation-iteration-count: 1
animation-timing-function: cubic-bezier(.2, .6, .8, .4)
animation-duration: 4s
animation-fill-mode: forwards
animation-delay: 0.25s
}
#banner .pour {
width: 6px
position: absolute
left: 50%
margin-left: -3px
bottom: 0
top: 0
background: #009ae6
animation-name: pourAction
animation-timing-function: linear
animation-duration: 0.25s
}
#banner #waveShape {
animation-name: waveAction
animation-iteration-count: infinite
animation-timing-function: linear
animation-duration: 0.5s
width: 300px
height: 150px
fill: #04ACFF
}
@keyframes pourAction {
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(0)
}
}
@keyframes fillAction {
0% {
transform: translateY(150px)
}
100% {
transform: translateY(-5px)
}
}
@keyframes waveAction {
0% {
transform: translate(-150px, 0)
}
100% {
transform: translate(0, 0)
}
}
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
4. С серьезным Bling (с красивой эстетикой)
Этот пример добавляет еще несколько свойств CSS, чтобы сделать его более реалистичным.
.bowl {
position: relative
border-radius: 50%
width: 150px
height: 150px
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1)
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%)
margin: 20px
}
.bowl:before {
overflow: hidden
border-radius: 50%
content: ""
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1)
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%)
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 81%, #000000 100%)
position: absolute
width: 150px
height: 150px
z-index: 2
}
.bowl:after {
content: ""
width: 60px
border-radius: 50%
height: 5px
background: #039be4
box-shadow: inset 0 0 10px 0 #000
position: absolute
left: 50%
margin-left: -30px
bottom: 0
z-index: 2
}
.bowl .inner {
border-radius: 50%
width: 150px
height: 150px
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%)
overflow: hidden
-webkit-backface-visibility: hidden
-webkit-transform: translate3d(0, 0, 0)
}
.bowl .inner:before {
content: ""
width: 20px
height: 20px
background: rgba(255, 255, 255, 0.2)
border-radius: 50%
position: absolute
right: 40%
top: 60%
z-index: 2
}
.bowl .inner:after {
content: ""
width: 20px
height: 40px
background: rgba(255, 255, 255, 0.2)
border-radius: 50%
position: absolute
right: 30%
top: 15%
transform: rotate(-20deg)
z-index: 2
}
.bowl .fill {
-webkit-animation-name: fillAction
-webkit-animation-iteration-count: 1
-webkit-animation-timing-function: cubic-bezier(0.2, 0.6, 0.8, 0.4)
-webkit-animation-duration: 4s
-webkit-animation-fill-mode: forwards
}
.bowl .waveShape {
-webkit-animation-name: waveAction
-webkit-animation-iteration-count: infinite
-webkit-animation-timing-function: linear
-webkit-animation-duration: 0.5s
width: 300px
height: 150px
fill: #039be4
}
@-webkit-keyframes fillAction {
0% {
-webkit-transform: translate(0, 150px)
}
100% {
-webkit-transform: translate(0, 10px)
}
}
@-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(-150px, 0)
}
100% {
-webkit-transform: translate(0, 0)
}
}
/* For aesthetics only ------------------------------------------*/
body {
margin: 0
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
}
h1 {
font: 200 1.2em "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
font-weight: 200
color: #fff
background: #039be4
padding: 20px
margin: 0
border-bottom: 10px solid #ccc
}
h1 strong {
font-family: "Segoe UI Black"
font-weight: normal
}
.explanation {
padding: 20px 40px
float: right
background: #e64a19
-webkit-box-shadow: inset 0 30px 3px 0 rgba(0, 0, 0, 0.5)
box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2)
border-bottom: 10px solid #ccc
max-width: 300px
}
.explanation p {
color: #fff
font-size: 0.8rem
}
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
Источник: Filling water animation @Chris Spittles
Я столкнулся с двумя ошибками и не смог даже преодолеть третью:
Использовать заполнение (fill) это неправильное решение. Круг возвращается до пустого (черного) цвета после его заполнения На данный момент я использую теги , но я хотел бы переместить этот эффект в body {background-image:} и нужно какое-то направление, как это сделать.
То, что я пробовал до сих пор: http://jsfiddle.net/um0rnL56/1/
#banner {
width: 300px
height: 300px
position: relative
}
#banner div {
position: absolute
}
#banner div:nth-child(2) {
-webkit-animation: wipe 6s
-webkit-animation-delay: 0s
-webkit-animation-direction: up
-webkit-mask-size: 300px 3000px
-webkit-mask-position: 300px 300px
-webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)))
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0
}
100% {
-webkit-mask-position: 300px 300px
}
}
Источник: Filling water animation @Arian Faurtosh
Ответ
Вот четыре разных варианта:
1. Используя Easing
Если вы заполняете жидкостью круглую чашу, то она будет заполняться быстрее внизу и сверху, чем в середине (потому что в более широкой средней части больше места для покрытия) Итак, с учетом этого грубого объяснения, анимация должна: начинаться быстро, замедляться посередине, а затем быстро заканчиваться, когда чаша сужается снова наверху.
Для этого мы можем использовать функцию easing CSS3: cub-bezier (.2, .6, .8, .4).
Посмотрите пример ниже.
(Если вы хотите настроить easing здесь, то вот отличный ресурс: http://cubic-bezier.com/#.2,.6,.8,.4)
#banner {
width: 150px
height: 150px
position: relative
background: #000
border-radius: 50%
overflow: hidden
}
#banner::before {
content: ''
position: absolute
background: #04ACFF
width: 100%
bottom: 0
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards
}
@keyframes wipe {
0% {
height: 0
}
100% {
height: 100%
}
2. SVG Deliciousness
Давайте сделаем еще один шаг вперед. Допустим, мы захотим добавить волнистую поверхность на «воду» с помощью CSS. Мы можем сделать это, используя SVG. Я создал волнистый SVG image в Adobe Illustrator, а затем анимировал image, чтобы перемещать его слева направо в цикле с отдельной анимацией CSS:
Пример
#banner {
border-radius: 50%
width: 150px
height: 150px
background: #000
overflow: hidden
backface-visibility: hidden
transform: translate3d(0, 0, 0)
}
#banner .fill {
animation-name: fillAction
animation-iteration-count: 1
animation-timing-function: cubic-bezier(.2, .6, .8, .4)
animation-duration: 4s
animation-fill-mode: forwards
}
#banner #waveShape {
animation-name: waveAction
animation-iteration-count: infinite
animation-timing-function: linear
animation-duration: 0.5s
width:300px
height: 150px
fill: #04ACFF
}
@keyframes fillAction {
0% {
transform: translate(0, 150px)
}
100% {
transform: translate(0, -5px)
}
}
@keyframes waveAction {
0% {
transform: translate(-150px, 0)
}
100% {
transform: translate(0, 0)
}
}
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
3. С линией наполнения
Этот пример включает линию заливки (большинство чаш заполняется сверху, а не снизу). Линия заливки сначала анимируется сверху вниз, в то время как свойство animation-delay предотвращает выполнение анимации заливки до завершения заливки.
#banner {
border-radius: 50%
width: 150px
height: 150px
background: #000
overflow: hidden
backface-visibility: hidden
transform: translate3d(0, 0, 0)
position: relative
}
#banner .fill {
transform: translateY(150px)
animation-name: fillAction
animation-iteration-count: 1
animation-timing-function: cubic-bezier(.2, .6, .8, .4)
animation-duration: 4s
animation-fill-mode: forwards
animation-delay: 0.25s
}
#banner .pour {
width: 6px
position: absolute
left: 50%
margin-left: -3px
bottom: 0
top: 0
background: #009ae6
animation-name: pourAction
animation-timing-function: linear
animation-duration: 0.25s
}
#banner #waveShape {
animation-name: waveAction
animation-iteration-count: infinite
animation-timing-function: linear
animation-duration: 0.5s
width: 300px
height: 150px
fill: #04ACFF
}
@keyframes pourAction {
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(0)
}
}
@keyframes fillAction {
0% {
transform: translateY(150px)
}
100% {
transform: translateY(-5px)
}
}
@keyframes waveAction {
0% {
transform: translate(-150px, 0)
}
100% {
transform: translate(0, 0)
}
}
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
4. С серьезным Bling (с красивой эстетикой)
Этот пример добавляет еще несколько свойств CSS, чтобы сделать его более реалистичным.
.bowl {
position: relative
border-radius: 50%
width: 150px
height: 150px
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1)
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%)
margin: 20px
}
.bowl:before {
overflow: hidden
border-radius: 50%
content: ""
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1)
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%)
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 81%, #000000 100%)
position: absolute
width: 150px
height: 150px
z-index: 2
}
.bowl:after {
content: ""
width: 60px
border-radius: 50%
height: 5px
background: #039be4
box-shadow: inset 0 0 10px 0 #000
position: absolute
left: 50%
margin-left: -30px
bottom: 0
z-index: 2
}
.bowl .inner {
border-radius: 50%
width: 150px
height: 150px
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%)
overflow: hidden
-webkit-backface-visibility: hidden
-webkit-transform: translate3d(0, 0, 0)
}
.bowl .inner:before {
content: ""
width: 20px
height: 20px
background: rgba(255, 255, 255, 0.2)
border-radius: 50%
position: absolute
right: 40%
top: 60%
z-index: 2
}
.bowl .inner:after {
content: ""
width: 20px
height: 40px
background: rgba(255, 255, 255, 0.2)
border-radius: 50%
position: absolute
right: 30%
top: 15%
transform: rotate(-20deg)
z-index: 2
}
.bowl .fill {
-webkit-animation-name: fillAction
-webkit-animation-iteration-count: 1
-webkit-animation-timing-function: cubic-bezier(0.2, 0.6, 0.8, 0.4)
-webkit-animation-duration: 4s
-webkit-animation-fill-mode: forwards
}
.bowl .waveShape {
-webkit-animation-name: waveAction
-webkit-animation-iteration-count: infinite
-webkit-animation-timing-function: linear
-webkit-animation-duration: 0.5s
width: 300px
height: 150px
fill: #039be4
}
@-webkit-keyframes fillAction {
0% {
-webkit-transform: translate(0, 150px)
}
100% {
-webkit-transform: translate(0, 10px)
}
}
@-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(-150px, 0)
}
100% {
-webkit-transform: translate(0, 0)
}
}
/* For aesthetics only ------------------------------------------*/
body {
margin: 0
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
}
h1 {
font: 200 1.2em "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
font-weight: 200
color: #fff
background: #039be4
padding: 20px
margin: 0
border-bottom: 10px solid #ccc
}
h1 strong {
font-family: "Segoe UI Black"
font-weight: normal
}
.explanation {
padding: 20px 40px
float: right
background: #e64a19
-webkit-box-shadow: inset 0 30px 3px 0 rgba(0, 0, 0, 0.5)
box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2)
border-bottom: 10px solid #ccc
max-width: 300px
}
.explanation p {
color: #fff
font-size: 0.8rem
}
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
Источник: Filling water animation @Chris Spittles
