Как оживить Всемирный день психического здоровья Лента SVG

() translation by (you can also view the original English article)

«Всемирный день психического здоровья» Всемирной организации здравоохранения проходит 10 октября 2018 года, чтобы помочь повысить осведомленность о проблемах психического здоровья. В этом году основной упор делается на то, чтобы побудить всех нас поддержать и принять участие в программах и услугах, которые могут охватить молодежь, в идеале - эффективно решать проблемы как можно раньше.

Чтобы отметить день, когда мы собираемся использовать CSS для анимации SVG с зеленой полосой, которую носят многие люди, чтобы символизировать понимание психического здоровья.

У нас будут две руки, соединяющиеся с левой и правой сторон сцены, чтобы сложить их вместе, иллюстрируя поддержку, которую люди могут оказывать друг другу, после чего появится зеленая лента вместе с некоторым описательным текстом.

Когда вы закончите, у вас будет эта анимация (нажмите RERUN, если необходимо):

1. Получить стартовый код

Я заранее подготовил для вас SVG и HTML-код, чтобы вы могли просто сосредоточиться на использовании CSS для анимации различных элементов, составляющих иллюстрацию.

Для начала создайте пустой HTML-файл, затем скопируйте и вставьте код, который вы видите ниже:

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>World Mental Health Day</title>
8	<link href="https://fonts.googleapis.com/css?family=Caveat:400,700" rel="stylesheet">
9	<style>
10
11	body {
12	background-color: #D0EDFE;
13	}
14
15	svg {
16	display: block;
17	margin: 3rem auto;
18	font-family: Caveat, sans-serif;
19	background-color: #B7E5FF;
20	}
21
22	#wmhd {
23	font-weight: bold;
24	font-size: 72px;
25	fill: #282828;
26	}
27
28	#date {
29	font-size: 48px;
30	fill: #278927;
31	}
32
33	</style>
34	</head>
35	<body>
36
37	<svg width="850" height="750" viewBox="0 0 850 750" fill="none" xmlns="https://www.w3.org/2000/svg">
38
39	<g id="claspedhands">
40	<path d="M508.339 276.562C511.282 284.053 510.129 300.268 504.817 308.514C504.774 308.582 504.729 308.649 504.684 308.716C551.468 359.956 566.291 373.371 622.006 434.574C587.17 498.343 511.007 478.353 467.838 508.169C447.525 473.653 435.504 452.343 411.823 409.98C400.392 417.136 373.565 417.601 365.009 409.806C193.117 300.42 443.459 130.168 508.339 276.562Z" fill="#939393"/>
41	<path d="M467.565 508.67C447.959 474.724 431.256 444.535 411.823 409.98C400.392 417.136 373.565 417.601 365.009 409.806C193.117 300.42 443.459 130.168 508.339 276.562C511.282 284.053 510.129 300.268 504.817 308.514C504.774 308.582 504.729 308.649 504.684 308.716C545.454 353.369 577.256 386.212 621.629 434.421" stroke="black" stroke-width="4.21201" stroke-miterlimit="0"/>
42	<path d="M532.32 210.603C525.485 203.101 514.271 202.941 506.443 209.4L496.373 217.709L494.807 215.99L500.374 210.821C504.366 207.115 507.083 196.77 500.248 189.268L494.079 182.498C487.244 174.996 475.52 176.219 467.277 182.139L451.604 193.397C450.764 194 450.168 194.848 449.549 195.633C448.629 196.255 447.741 196.936 446.885 197.696L416.423 225.451L427.105 212.724C430.816 203.278 432.697 179.685 423.251 175.974L414.728 172.625C405.282 168.914 394.687 173.531 390.976 182.977L343.802 285.047C340.859 292.538 342.012 308.753 347.324 316.999C347.367 317.067 347.412 317.134 347.457 317.201C301.379 365.613 290.446 376.553 236.145 436.342C247.815 502.605 331.661 479.816 390.313 507.462C432.8 439.469 412.342 469.462 440.317 418.465C451.749 425.621 478.576 426.087 487.132 418.291L574.962 338.267C575.806 337.499 576.554 336.667 577.258 335.812C578.099 335.267 578.958 334.71 579.681 333.968L592.153 321.169C596.623 316.581 600.192 302.79 593.357 295.288L587.188 288.517C580.353 281.015 569.311 281.48 565.059 284.972L561.193 288.853L559.627 287.134L568.088 278.788C575.314 271.661 576.129 260.411 569.294 252.909L563.125 246.139C556.29 238.637 544.47 237.808 537.244 244.935L528.783 253.281L527.217 251.562L537.287 243.253C545.115 236.794 545.326 224.877 538.491 217.375L532.32 210.603Z" fill="#CFCFCF"/>
43	<path d="M389.94 509.499C408.667 477.144 422.387 451.15 440.317 418.465C451.749 425.621 478.576 426.087 487.132 418.291L574.962 338.267C575.806 337.499 576.554 336.667 577.258 335.812C578.099 335.267 578.958 334.71 579.681 333.968L592.153 321.169C596.623 316.581 600.192 302.79 593.357 295.288L587.188 288.517C580.353 281.015 569.311 281.48 565.059 284.972L561.193 288.853L559.627 287.134L568.088 278.788C575.314 271.661 576.129 260.411 569.294 252.909L563.125 246.139C556.29 238.637 544.47 237.808 537.244 244.935L528.783 253.281L527.217 251.562L537.287 243.253C545.115 236.794 545.326 224.877 538.491 217.375L532.32 210.603C525.485 203.101 514.271 202.941 506.443 209.4L496.373 217.709L494.807 215.99L500.374 210.821C504.366 207.115 507.083 196.77 500.248 189.268L494.079 182.498C487.244 174.996 475.52 176.219 467.277 182.139L451.604 193.397C450.764 194 450.168 194.848 449.549 195.633C448.629 196.255 447.741 196.936 446.885 197.696L416.423 225.451L427.105 212.724C430.816 203.278 432.697 179.685 423.251 175.974L414.728 172.625C405.282 168.914 394.687 173.531 390.976 182.977L343.802 285.047C340.859 292.538 342.012 308.753 347.324 316.999C347.367 317.067 347.412 317.134 347.457 317.201C309.084 357.518 276.94 391.954 235.901 436.875" stroke="black" stroke-width="4.21201" stroke-miterlimit="0"/>
44	<path d="M266.422 280.275L259.664 287.295C252.629 294.603 252.801 306.184 260.049 313.161L300.846 352.433C308.093 359.41 319.673 359.141 326.708 351.832L333.466 344.812C340.501 337.503 340.329 325.923 333.081 318.946L292.284 279.674C285.036 272.697 273.457 272.966 266.422 280.275Z" fill="#939393" stroke="black" stroke-width="4" stroke-miterlimit="0"/>
45	<path d="M289.761 236.932L282.914 244.045C275.879 251.353 276.051 262.934 283.299 269.911L338.149 322.711C345.396 329.688 356.975 329.419 364.011 322.11L370.858 314.997C377.893 307.688 377.721 296.108 370.474 289.131L315.623 236.331C308.376 229.354 296.797 229.623 289.761 236.932Z" fill="#939393" stroke="black" stroke-width="4" stroke-miterlimit="0"/>
46	<path d="M319.958 201.487L313.164 208.545C306.129 215.853 306.301 227.434 313.549 234.411L371.28 289.984C378.528 296.961 390.107 296.692 397.142 289.383L403.936 282.326C410.972 275.017 410.8 263.436 403.552 256.459L345.821 200.886C338.573 193.909 326.994 194.178 319.958 201.487Z" fill="#939393" stroke="black" stroke-width="4" stroke-miterlimit="0"/>
47	<path d="M358.422 174.275L351.664 181.295C344.629 188.603 344.801 200.184 352.049 207.161L392.846 246.433C400.093 253.41 411.673 253.141 418.708 245.832L425.466 238.812C432.501 231.503 432.329 219.923 425.081 212.946L384.284 173.674C377.036 166.697 365.457 166.966 358.422 174.275Z" fill="#939393" stroke="black" stroke-width="4" stroke-miterlimit="0"/>
48	<path d="M463.428 180.361L456.215 172.507C450.284 166.048 439.469 166.329 432.059 173.133L414.548 189.214C407.139 196.019 405.94 206.771 411.871 213.229L419.084 221.084C425.015 227.543 435.83 227.262 443.24 220.457L460.751 204.377C468.161 197.572 469.359 186.82 463.428 180.361Z" fill="#939393" stroke="black" stroke-width="4" stroke-miterlimit="0"/>
49	</g>
50
51	<g id="rearhand">
52	<path d="M269.164 71.2693C277.277 65.1719 288.715 66.7945 294.813 74.9076L388.409 199.447L390.267 198.05L306.761 86.9352C300.663 78.8221 302.286 67.3801 310.399 61.2828L317.721 55.7803C325.834 49.6829 337.274 51.3077 343.371 59.4208L436.923 183.901C437.544 184.728 438.063 185.594 438.525 186.481C439.313 187.264 440.071 188.09 440.758 189.005L465.516 221.948L451.82 149.541C449.934 139.569 456.445 130.022 466.417 128.136L475.415 126.433C485.387 124.547 494.936 131.056 496.822 141.029L525.764 294.03C527.259 301.938 523.106 317.654 516.351 324.766C516.296 324.825 516.239 324.882 516.183 324.94C558.931 368.888 571.513 379.923 621.827 434.096C591.281 496.437 505.751 480.411 467.159 508.676C431.44 451.669 432.846 453.331 406.083 407.132C393.518 412.033 367.074 407.493 360.121 398.24L288.736 303.255C288.05 302.342 287.47 301.386 286.938 300.415C286.213 299.723 285.523 298.98 284.901 298.152L219.781 211.503C213.684 203.39 215.307 191.948 223.42 185.851L230.742 180.348C238.855 174.251 250.297 175.874 256.394 183.987L311.469 257.27L313.328 255.873L227.07 141.097C220.972 132.984 222.593 121.544 230.706 115.447L238.028 109.944C246.141 103.847 257.583 105.47 263.681 113.583L349.939 228.359L351.798 226.962L258.202 102.422C252.104 94.3089 253.727 82.8708 261.84 76.7735L269.164 71.2693Z" fill="#939393"/>
53	<path d="M328.908 50.0009C328.499 49.9969 328.089 50.0057 327.68 50.0263C323.751 50.2238 319.837 51.5555 316.455 54.0966L309.135 59.5986C302.541 64.5543 299.846 72.7305 301.498 80.2959L296.496 73.6416C289.72 64.625 276.915 62.8086 267.899 69.5849L260.574 75.0908C251.558 81.8671 249.741 94.6699 256.518 103.686L258.768 106.681C251.96 102.99 243.358 103.305 236.764 108.261L229.442 113.763C220.425 120.539 218.611 133.346 225.387 142.362L251.483 177.087C244.675 173.395 236.071 173.709 229.477 178.665L222.154 184.167C213.138 190.943 211.321 203.752 218.098 212.769L283.217 299.417C283.853 300.263 284.549 300.992 285.252 301.681C285.779 302.626 286.349 303.583 287.053 304.52L358.438 399.505C362.585 405.024 371.283 408.334 380.613 410.065C389.224 411.663 398.256 411.69 405.08 409.569C422.664 439.865 465.735 509.69 465.735 509.69L469.362 507.587C469.362 507.587 425.595 436.613 407.906 406.077L405.319 405.169C399.707 407.358 390.152 407.55 381.381 405.923C372.61 404.296 364.611 400.709 361.805 396.976L290.42 301.989C289.816 301.185 289.287 300.32 288.785 299.403L288.391 298.892C287.728 298.259 287.121 297.601 286.584 296.886L221.465 210.237C216.047 203.028 217.476 192.952 224.686 187.534L232.006 182.032C239.215 176.614 249.293 178.044 254.711 185.253L309.785 258.536L312.735 258.954L314.594 257.558L315.012 254.608L228.754 139.831C223.336 132.621 224.761 122.548 231.971 117.13L239.293 111.628C246.503 106.21 256.578 107.639 261.996 114.849L348.256 229.624L351.203 230.042L353.063 228.646L353.481 225.696L259.885 101.157C254.467 93.9476 255.896 83.8765 263.106 78.4581L270.43 72.9522C277.64 67.5338 287.711 68.9632 293.129 76.1729L386.725 200.712L389.674 201.13L391.533 199.733L391.951 196.784L308.444 85.671C303.025 78.4615 304.455 68.3841 311.664 62.9659L318.987 57.4639C321.69 55.4321 324.796 54.3642 327.908 54.2022C333.096 53.9322 338.301 56.1805 341.688 60.6866L435.24 185.167C435.775 185.879 436.235 186.642 436.658 187.454L437.041 187.974C437.783 188.711 438.467 189.463 439.074 190.271L463.832 223.214L467.586 221.556L453.891 149.149C452.215 140.288 457.947 131.88 466.809 130.204L475.807 128.503C484.668 126.827 493.078 132.56 494.754 141.421L523.694 294.421C524.328 297.775 523.759 303.527 522.129 309.107C520.5 314.686 517.817 320.165 514.824 323.316L514.81 323.329C514.783 323.358 514.738 323.406 514.674 323.472V326.409C550.679 363.425 620.078 435.819 620.078 435.819L623.18 433.005C623.18 433.005 554.539 361.301 519.002 324.802C522.174 320.906 524.598 315.676 526.172 310.286C527.934 304.253 528.693 298.192 527.832 293.638L498.892 140.638C496.796 129.555 486.106 122.268 475.023 124.364L466.025 126.065C454.943 128.162 447.655 138.85 449.752 149.933L461.767 213.454L442.441 187.739C441.737 186.802 440.974 185.987 440.211 185.216C439.746 184.351 439.243 183.481 438.607 182.636L345.055 58.1552C341.084 52.8721 335.044 50.0605 328.908 50.0009Z" fill="black"/>
54	</g>
55
56	<g id="fronthand">
57	<path d="M583.767 78.3404C575.654 72.243 564.216 73.8656 558.119 81.9787L464.523 206.518L462.664 205.121L546.171 94.0063C552.268 85.8931 550.645 74.4512 542.532 68.3539L535.21 62.8514C527.097 56.754 515.657 58.3788 509.56 66.4919L416.008 190.972C415.387 191.799 414.868 192.665 414.406 193.552C413.618 194.335 412.861 195.161 412.173 196.076L387.415 229.019L401.111 156.612C402.997 146.64 396.486 137.093 386.514 135.207L377.516 133.504C367.544 131.618 357.995 138.128 356.109 148.1L327.168 301.101C325.672 309.009 329.825 324.725 336.58 331.837C336.635 331.896 336.692 331.953 336.748 332.011C294 375.959 286.959 382.204 236.644 436.376C243.155 503.914 352.274 483.214 391.041 508.955C426.76 451.948 420.086 460.402 446.848 414.203C459.413 419.104 485.857 414.564 492.81 405.311L564.195 310.326C564.881 309.413 565.462 308.457 565.994 307.486C566.719 306.794 567.408 306.051 568.031 305.223L633.15 218.574C639.248 210.461 637.624 199.019 629.511 192.922L622.19 187.419C614.076 181.322 602.634 182.945 596.537 191.058L541.462 264.341L539.603 262.944L625.862 148.168C631.959 140.055 630.338 128.615 622.225 122.518L614.903 117.015C606.79 110.918 595.348 112.541 589.251 120.654L502.992 235.43L501.133 234.033L594.73 109.493C600.827 101.38 599.204 89.9419 591.091 83.8445L583.767 78.3404Z" fill="#CFCFCF"/>
58	<path d="M390.087 509.103C390.087 509.103 430.317 442.74 446.848 414.203C459.413 419.104 485.857 414.564 492.81 405.311L564.195 310.326C564.881 309.413 565.462 308.457 565.994 307.486C566.719 306.794 567.408 306.051 568.031 305.223L633.15 218.574C639.248 210.461 637.624 199.019 629.511 192.922L622.19 187.419C614.076 181.322 602.634 182.945 596.537 191.058L541.462 264.341L539.603 262.944L625.862 148.168C631.959 140.055 630.338 128.615 622.225 122.518L614.903 117.015C606.79 110.918 595.348 112.541 589.251 120.654L502.992 235.43L501.133 234.033L594.73 109.493C600.827 101.38 599.204 89.9419 591.091 83.8445L583.767 78.3404C575.654 72.243 564.216 73.8656 558.119 81.9787L464.523 206.518L462.664 205.121L546.171 94.0063C552.268 85.8931 550.645 74.4512 542.532 68.3539L535.21 62.8514C527.097 56.754 515.657 58.3788 509.56 66.4919L416.008 190.972C415.387 191.799 414.868 192.665 414.406 193.552C413.618 194.335 412.861 195.161 412.173 196.076L387.415 229.019L401.111 156.612C402.997 146.64 396.486 137.093 386.514 135.207L377.516 133.504C367.544 131.618 357.995 138.128 356.109 148.1L327.168 301.101C325.672 309.009 329.825 324.725 336.58 331.837C336.635 331.896 336.692 331.953 336.748 332.011C302.539 367.18 235.996 436.805 235.996 436.805" stroke="black" stroke-width="4.21201" stroke-miterlimit="0"/>
59	</g>
60
61	<g id="ribbon">
62	<path opacity="0.5" d="M409.324 218.898C383.224 233.103 373.967 258.609 366.663 281.142C372.314 305.085 383.929 327.583 398.489 349.77C375.778 379.237 353.836 407.819 331.642 436.674C344.606 447.628 360.706 459.854 373.611 469.577C390.843 442.708 411.04 417.785 430.124 393.358C448.921 417.754 468.895 442.659 486.158 469.577C498.358 459.704 517.141 445.724 528.372 436.685C501.326 399.924 479.705 372.74 461.872 350.36C476.981 327.829 489.046 305.009 494.769 280.757C487.448 258.172 476.504 232.983 461.171 224.294C445.838 215.604 438.022 214.365 430.06 214.301C422.098 214.237 414.948 215.38 409.324 218.898ZM430.4 261.367C439.286 261.395 447.897 263.078 454.585 266.388C448.73 280.484 438.902 295.268 428.521 293.74C418.139 292.213 406.633 277.79 407.786 269.796C408.938 261.802 421.618 261.339 430.4 261.367Z" fill="black" stroke="black" stroke-width="7.23926" stroke-miterlimit="0"/>
63	<path d="M429.513 199.39C422.098 199.39 414.948 200.533 409.324 204.051C383.224 218.255 373.967 243.761 366.663 266.295C372.314 290.238 384.326 313.132 398.886 335.32C376.454 365.533 352.714 392.558 331.853 423.442C343.623 432.43 360.706 445.006 373.611 454.73C390.843 427.86 411.04 402.937 430.124 378.511C448.921 402.906 468.597 427.861 485.86 454.779C498.683 445.073 516.974 430.992 527.577 423.427C500.531 386.666 478.315 359.482 460.482 337.102C475.591 314.571 489.045 290.161 494.769 265.91C487.448 243.324 474.326 222.069 459.053 209.871C443.991 200.202 436.333 199.558 429.513 199.39ZM430.4 246.52C439.286 246.548 447.897 248.231 454.585 251.54C448.73 265.636 439.101 281.016 429.411 294.177C419.772 280.17 410.078 264.73 404.921 251.262C412.591 248.078 421.618 246.492 430.4 246.52V246.52Z" stroke="black" stroke-width="7.23926" stroke-miterlimit="0"/>
64	<path d="M399.173 210.595C418.538 194.483 441.915 196.577 457.509 208.59C471.921 225.508 463.049 243.785 465.133 261.177C454.672 241.741 407.164 241.611 390.57 260.921C392.04 244.757 372.809 230.047 399.173 210.595V210.595Z" fill="#155415"/>
65	<path d="M450.017 203.95C476.256 218.135 487.2 243.324 494.521 265.91C478.973 331.791 416.717 387.127 373.363 454.729L331.734 423.364C372.481 359.196 497.691 238.921 450.017 203.95Z" fill="#007E00"/>
66	<path d="M433.541 288.678L393.363 342.973L425.216 384.237L465.032 329.942L433.541 288.678Z" fill="#007100"/>
67	<path d="M409.254 203.95C383.016 218.135 373.736 243.708 366.414 266.294C381.963 332.175 442.555 387.127 485.909 454.729L527.538 423.364C486.791 359.196 361.58 238.921 409.254 203.95Z" fill="#00AB00"/>
68	</g>
69
70	<text id="wmhd" x="110" y="590">World Mental Health Day</text>
71	<text id="date" x="270" y="650">10th October 2018</text>
72	</svg>
73
74	</body>
75	</html>

Сохраните и просмотрите файл в браузере, и вы должны увидеть это изображение со всеми видимыми элементами SVG, некоторые из которых расположены поверх других:

World Mental Health Day 2018 first image

Давайте начнем с разбивки каждого элемента, включенного в SVG, чтобы вы знали, с чем мы работаем.

Сначала у нас есть передняя рука, которая войдет с левой стороны SVG:

Тогда у нас есть задняя рука, которая войдет справа:

После того, как две открытые руки пересекаются в центре экрана, мы заменим их сложенными руками:

World Mental Health Day 2018 clasped hands

Затем у нас есть зеленая лента осведомленности о психическом здоровье, которая исчезнет:

World Mental Health Day 2018 green ribbon

Основной текст «Всемирного дня психического здоровья», который появится после этого:

И текст даты, который будет последним элементом, который должен исчезнуть:

2. Начните добавлять CSS

Все, что нам нужно для нашей анимации, уже находится в коде SVG, нам просто нужно охватить и нацелить элементы, которые он содержит, через их идентификаторы.

Первое, что нам нужно сделать, это спрятать все элементы, чтобы мы могли позже показать каждый из них в соответствующее время. Добавьте следующий код между тегами style> , уже присутствующими в только что созданном HTML-файле.

1	#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date {
2	opacity: 0;
3	}

3. Заставьте переднюю руку войти слева

Мы будем использовать анимации keyframes для каждой части нашей последовательности. Первая анимация, которую мы создадим, - это та, которая может заставить элемент перемещаться из положения за пределами левого края SVG в исходное положение в центре.

Добавьте следующий код в ваш CSS.

    @keyframes infromleft {
		from {
			transform: translate(-100%);
			opacity: 1;
		}
		to {
			transform: translate(0%);
			opacity: 1;
		}
	}

Давайте пройдемся по тому, что мы делаем с этим кодом.

Нам нужно только переместить наш элемент из одной позиции в другую, а не зигзагообразно проходить через промежуточные позиции. По этой причине мы можем просто использовать from и to, а не указывать процентные ключевые кадры.

В ключевом кадре from мы будем использовать свойство transform, чтобы перевести, т.е. переместить элемент влево, позицию, которая выражается как -100%. В ключевом кадре to мы указываем исходную позицию элемента с 0%. Анимация ключевого кадра автоматически обрабатывает перемещение элемента между состояниями from и to.

Вы также заметите, что opacity установлена на 1 в обоих ключевых кадрах. Это означает, что элемент появится в начале анимации, останется видимым до самого конца, а затем вернется к opacity по умолчанию 0, которую мы установили ранее, и снова исчезнет. Нам нужно, чтобы это произошло, чтобы освободить место для элемента со сложенными руками, который появится позже.

Теперь мы можем применить анимацию к переднему элементу нашего SVG, который использует ID #fronthand. Добавьте следующий CSS в ваш код.

    #fronthand {
		animation-name: infromleft;
		animation-duration: 1.5s;
		animation-timing-function: ease-out;
	}

Здесь мы указываем имя анимации, то есть infromleft, который активирует только что созданную анимацию. Во второй строке мы говорим, что анимация запускается в течение 1,5 секунд. А в третьей строке мы говорим использовать функцию ease-out, которая заставит двигаться быстрее, а затем замедлится до конца.

Когда вы сохраните и обновите свою страницу сейчас, вы должны увидеть, как передняя рука входит сбоку и останавливается в центре, как показано ниже, на короткое время, прежде чем исчезнуть:

4. Заставьте заднюю руку войти справа

Теперь мы создадим еще одну анимацию, почти идентичную первой, с той разницей, что элемент будет перемещаться справа, а не слева. Добавьте этот CSS к вашему стилю:

    @keyframes infromright {
		from {
			transform: translate(100%);
			opacity: 1;
		}
		to {
			transform: translate(0%);
			opacity: 1;
		}
	}

Вы увидите, что в ключевом кадре from мы переводим на 100% вместо -100%, что выталкивает начальную точку анимации за правый край. Все остальное в этом коде совпадает с последней анимацией.

Мы применим эту анимацию к заднему элементу в SVG, добавив следующий код:

    #rearhand {
		animation-name: infromright;
		animation-duration: 1.5s;
		animation-timing-function: ease-out;
	}

Теперь вы должны увидеть, как две руки собираются вместе, пока они не пересекутся посередине, а затем снова исчезнут.

World Mental Health Day 2018 hands crossing over

5.Сделать соединенные руки

У нас уже две открытые руки исчезают, как только они закончили движение. Далее, нам нужно, чтобы элемент сложенных рук мгновенно появился в тот момент, когда исчезают открытые руки.

Чтобы это произошло, мы создадим еще одну ключевую анимацию с именем instantappear. Все, что будет делать эта анимация, это установить opacity 1 на протяжении всей анимации. Добавьте этот CSS в ваш файл:

    @keyframes instantappear {
		from {
			opacity: 1;
		}
		to {
			opacity: 1;
		}
	}

Примените анимацию к элементу #claspedhands с помощью этого кода:

    #claspedhands {
		animation-name: instantappear;
		animation-duration: 1s;
		animation-delay: 1.5s;
		animation-fill-mode: forwards;
	}

Здесь в первых двух строках мы вызываем нашу анимацию instantappear и устанавливаем ее продолжительность равной 1 секунде.

В третьей строке мы говорим, что анимация задерживается на 1,5 секунды, что соответствует продолжительности наших первых двух анимаций. Таким образом, как только они закончат, эта анимация начнется.

Затем в четвертой строке мы устанавливаем свойство animation-fill-mode в forward. Это говорит анимации остановиться на последнем кадре и остаться там. Это будет держать элемент с opacity 1, установленной в конечном ключевом кадре, вместо того, чтобы возвращаться к opacity по умолчанию 0, как это делали наши передняя и задняя руки.

Предварительно просмотрите анимацию, и когда она закончится, вы должны увидеть это:

6. Исчезновение оставшихся элементов с повторно используемыми ключевыми кадрами.

Нам нужна только еще одна анимация для трех оставшихся элементов, та, которая исчезнет во всем, к чему она применяется. Мы можем использовать его для каждого элемента с различными настройками, чтобы завершить нашу последовательность.

Создайте новую анимацию с именем fadein и установите для нее переход от opacity 0 к opacity 1 следующим образом:

    @keyframes fadein {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

Зеленая лента - следующий элемент, который мы хотим отобразить, поэтому примените к нему нашу новую анимацию fadein с помощью следующего CSS:

    #ribbon {
		animation-name: fadein;
		animation-duration: 0.75s;
		animation-delay: 1.75s;
		animation-fill-mode: forwards;
	}

Здесь эффект затухания длится три четверти секунды, и мы устанавливаем его на 1,75 секунды после завершения предыдущих анимаций. Снова мы используем animation-fill-mode: forwards; чтобы opacity элемента оставалась равной 1, а не по умолчанию равной 0.

Когда ваша последовательность завершится, вы должны увидеть это:

World Mental Health Day 2018 final animation

Теперь мы добавим основной текст. У нас уже есть стиль #wmhd в документе, поэтому обновите его следующим образом:

    #wmhd {
		font-weight: bold;
		font-size: 72px;
		fill: #282828;
		animation-name: fadein;
		animation-duration: 0.75s;
		animation-delay: 2.25s;
		animation-fill-mode: forwards;
	}

Мы используем тот же код, что и на элементе #ribbon, просто увеличив задержку до 2,25 секунды, чтобы поразить внешний вид элементов.

Ваша анимация должна завершиться в этом состоянии:

World Mental Health Day 2018 finish state

Наконец, нам нужно отобразить дату, поэтому обновите существующий стиль #date:

    #date {
		font-size: 48px;
		fill: #278927;
		animation-name: fadein;
		animation-duration: 0.75s;
		animation-delay: 2.75s;
		animation-fill-mode: forwards;
	}