Wie kann man ein SVG-Band zum Welttag der psychischen Gesundheit animieren?

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

Der „Welttag der psychischen Gesundheit“ der Weltgesundheitsorganisation findet am 10. Oktober 2018 statt, um das Bewusstsein für psychische Gesundheitsprobleme zu schärfen. In diesem Jahr liegt der Schwerpunkt darauf, uns alle zu ermutigen, Programme und Dienstleistungen zu unterstützen und sich daran zu beteiligen, die junge Menschen erreichen und Probleme im Idealfall so früh wie möglich effektiv behandeln.

An diesem Tag werden wir CSS verwenden, um eine SVG zu animieren, die auf dem grünen Band zentriert ist, das viele Menschen tragen, um das Bewusstsein für psychische Gesundheit zu symbolisieren.

Wir haben zwei Hände, die von der linken und rechten Seite der Bühne zusammenkommen, um sich zu fassen. Dies zeigt, welche Unterstützung sich die Menschen gegenseitig leisten können. Danach erscheint das grüne Band zusammen mit einem beschreibenden Text.

Wenn Sie fertig sind, haben Sie diese Animation (drücken Sie bei Bedarf RERUN):

Please accept marketing cookies to load this content.

1. Holen Sie sich den Starter-Code

Ich habe den SVG- und HTML-Code im Voraus für Sie vorbereitet, damit Sie sich nur auf die Verwendung von CSS konzentrieren können, um verschiedene Elemente zu animieren, aus denen die Abbildung besteht.

Erstellen Sie zunächst eine leere HTML-Datei und kopieren Sie den folgenden Code und fügen Sie ihn ein:

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>

Speichern und zeigen Sie Ihre Datei in einem Browser in der Vorschau an. Sie sollten dieses Bild mit allen sichtbaren SVG-Elementen sehen, von denen einige über anderen gestapelt sind:

World Mental Health Day 2018 first image

Beginnen wir mit einer Aufschlüsselung aller in der SVG enthaltenen Elemente, damit Sie wissen, womit wir arbeiten.

Zuerst haben wir die vordere Hand, die von der linken Seite der SVG eintritt:

Dann haben wir die hintere Hand, die von rechts eintreten wird:

Nachdem sich die beiden offenen Hände in der Mitte des Bildschirms gekreuzt haben, werden wir sie durch die gefalteten Hände ersetzen:

World Mental Health Day 2018 clasped hands

Wir haben dann das grüne Bewusstseinsband für psychische Gesundheit, das eingeblendet wird:

World Mental Health Day 2018 green ribbon

Der Haupttext zum „Welttag der psychischen Gesundheit“, der danach eingeblendet wird:

Und der Datumstext, der das letzte Element zum Einblenden sein wird:

2. Starten Sie das Hinzufügen von CSS

Alles, was wir für unsere Animation benötigen, befindet sich bereits im SVG-Code. Wir müssen nur die darin enthaltenen Elemente über ihre IDs erreichen und gezielt darauf abzielen.

Das erste, was wir tun müssen, ist, alle Elemente auszublenden, damit wir sie später zum richtigen Zeitpunkt anzeigen können. Fügen Sie den folgenden Code zwischen die <style></style>-Tags ein, die bereits in der gerade erstellten HTML-Datei vorhanden sind.

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

3. Lassen Sie die vordere Hand von links eintreten

Wir werden für jeden Teil unserer Sequenz @keyframes-Animationen verwenden. Die erste Animation, die wir erstellen, ist eine, mit der ein Element von einer Position außerhalb des linken Randes der SVG zu seiner ursprünglichen Position in der Mitte verschoben werden kann.

Fügen Sie Ihrem CSS den folgenden Code hinzu.

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

Lassen Sie uns durchgehen, was wir mit diesem Code machen.

Wir müssen unser Element nur von einer Position zur anderen bewegen, anstatt es im Zickzack durch Zwischenpositionen zu bringen. Aus diesem Grund können wir nur from und to verwenden, anstatt prozentuale Keyframes angeben zu müssen.

Im from-Keyframe verwenden wir die transform-Eigenschaft zu translate, um das Element ganz nach links zu verschieben, d. h. Neu zu positionieren, eine Position, die als -100% ausgedrückt wird. Im to-Keyframe geben wir die ursprüngliche Position des Elements mit 0% an. Die Keyframe-Animation behandelt automatisch das Verschieben des Elements zwischen den Zuständen from und to.

Sie werden auch feststellen, dass die opacity in beiden Keyframes auf 1 gesetzt ist. Dies bedeutet, dass das Element am Anfang der Animation angezeigt wird, bis zum Ende sichtbar bleibt und dann auf die zuvor festgelegte Standard-opacity von 0 zurückgesetzt wird und wieder verschwindet. Wir brauchen dies, um Platz für das Element mit den gefalteten Händen zu machen, das danach erscheint.

Jetzt können wir die Animation auf das Front-Hand-Element unserer SVG anwenden, das die ID #fronthand verwendet. Fügen Sie Ihrem Code das folgende CSS hinzu.

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

Hier geben wir den Namen der Animation an, d. h. infromleft, wodurch die gerade erstellte Animation ausgelöst wird. In der zweiten Zeile teilen wir der Animation mit, dass sie über einen Zeitraum von 1,5 Sekunden ausgeführt werden soll. In der dritten Zeile wird empfohlen, die easy-out-Animations-Timing-Funktion zu verwenden, mit der die Bewegung schnell beginnt und gegen Ende langsamer wird.

Wenn Sie Ihre Seite jetzt speichern und aktualisieren, sollten Sie sehen, dass die vordere Hand von der Seite kommt und in der Mitte anhält, wie unten abgebildet, für einen kurzen Moment, bevor sie verschwindet:

4. Lassen Sie die hintere Hand von rechts eintreten

Wir werden jetzt eine weitere fast identische Animation wie die erste erstellen, mit dem Unterschied, dass das Element von rechts statt von links eingezogen wird. Fügen Sie dieses CSS Ihrem Stil hinzu:

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

Sie werden sehen, dass wir im from-Keyframe zu 100% anstatt zu -100% übersetzen, wodurch der Startpunkt der Animation über den rechten Rand hinaus verschoben wird. Alles andere in diesem Code entspricht der letzten Animation.

Wir werden diese Animation auf das hintere Element in der SVG anwenden, indem wir diesen Code hinzufügen:

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

Jetzt sollten Sie sehen, wie die beiden Hände zusammenkommen, bis sie sich in der Mitte kreuzen, bevor sie wieder verschwinden.

World Mental Health Day 2018 hands crossing over

5. Machen Sie den Handverschluss

Wir haben bereits die beiden offenen Hände verschwunden, sobald sie sich bewegt haben. Als nächstes müssen wir das Element der gefalteten Hände sofort genau in dem Moment erscheinen lassen, in dem die offenen Hände verschwinden.

Um dies zu erreichen, erstellen wir eine weitere Keyframe-Animation mit dem Namen instantappear. Diese Animation setzt lediglich die opacity während der gesamten Animation auf 1. Fügen Sie dieses CSS zu Ihrer Datei hinzu:

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

Wenden Sie die Animation mit dem folgenden Code auf das Element #claspedhands an:

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

Hier rufen wir in den ersten beiden Zeilen unsere sofort instantappear Animation auf und setzen ihre duration auf 1 Sekunde.

In der dritten Zeile weisen wir die Animation an, sich um 1,5 Sekunden zu delay, was der Dauer unserer ersten beiden Animationen entspricht. Auf diese Weise beginnt diese Animation, sobald sie fertig ist.

In der vierten Zeile setzen wir die Eigenschaft animation-filll-mode auf forwards. Dadurch wird die Animation angewiesen, bei ihrem letzten Frame anzuhalten und dort zu bleiben. Dadurch bleibt das Element bei der im End-Keyframe festgelegten opacity von 1, anstatt wie bei unseren vorderen und hinteren Händen auf die Standard-opacity von 0 zurückzukehren.

Zeigen Sie eine Vorschau Ihrer Animation an, und wenn sie fertig ist, sollten Sie Folgendes sehen:

6. Verbleibende Elemente mit wiederverwendbaren Keyframes einblenden

Für die drei verbleibenden Elemente benötigen wir nur noch eine Animation, die alles einblendet, worauf sie angewendet wird. Wir können es für jedes Element mit unterschiedlichen Einstellungen verwenden, um unsere Sequenz zu vervollständigen.

Erstellen Sie eine neue Animation mit dem Namen fadein und stellen Sie sie so ein, dass sie von opacity 0 zu opacity 1 übergeht:

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

Das grüne Band ist das nächste Element, das angezeigt werden soll. Wenden Sie daher unsere neue fadein-Animation mit dem folgenden CSS darauf an:

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

Hier wird die Überblendung für eine Dreiviertelsekunde wirksam und so eingestellt, dass sie nach Abschluss der vorhergehenden Animationen bei 1,75 Sekunden beginnt. Wieder verwenden wir den animation-fill-mode:forwards; um sicherzustellen, dass die opacity des Elements bei 1 bleibt, anstatt standardmäßig auf 0 zurückzusetzen.

Wenn Ihre Sequenz abgeschlossen ist, sollten Sie Folgendes sehen:

World Mental Health Day 2018 final animation

Jetzt wird auch der Haupttext eingeblendet. Wir haben bereits einen #wmhd-Stil im Dokument. Aktualisieren Sie ihn daher auf Folgendes:

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

Wir verwenden denselben Code wie für das Element #ribbon und verschieben die Verzögerung auf 2,25 Sekunden, damit das Erscheinungsbild der Elemente gestaffelt wird.

Ihre Animation sollte nun in diesem Zustand beendet sein:

World Mental Health Day 2018 finish state

Schließlich müssen wir das Datum anzeigen lassen, also aktualisieren Sie den vorhandenen #date-Stil auf:

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