本文介绍如何使用CSS为SVG设置动画，以庆祝世界精神卫生日。通过创建各种关键帧动画，包括从左右两侧进入的手部动画、淡入淡出的文本和绿色丝带，展示了动画制作的全过程。
svg动画制作
世界卫生组织的“世界精神卫生日”在这里，2018年10月10日，以帮助提高人们对精神卫生问题的认识。 今年的重点是鼓励我们所有人支持并参与可以影响到年轻人的计划和服务，最好是尽早有效地处理问题。
为了纪念这一天，我们将使用CSS为以绿色丝带为中心的SVG设置动画，许多人佩戴以象征着心理健康意识。
我们将有两只手从舞台的左侧和右侧并拢，以扣紧在一起，说明人们可以互相提供的支持，然后绿丝带将与一些描述性文字一同出现。
完成后，您将获得以下动画（如果需要，请按RERUN ）：
1.获取入门代码
我已经为您预先准备了SVG和HTML代码，因此您可以专注于使用CSS制作构成插图的各种元素。
首先，创建一个空HTML文件，然后复制并粘贴以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>World Mental Health Day</title>
<link href="https://fonts.googleapis.com/css?family=Caveat:400,700" rel="stylesheet">
<style>
body {
background-color: #D0EDFE;
}
svg {
display: block;
margin: 3rem auto;
font-family: Caveat, sans-serif;
background-color: #B7E5FF;
}
#wmhd {
font-weight: bold;
font-size: 72px;
fill: #282828;
}
#date {
font-size: 48px;
fill: #278927;
}
</style>
</head>
<body>
<svg width="850" height="750" viewBox="0 0 850 750" fill="none" xmlns="https://www.w3.org/2000/svg">
<g id="claspedhands">
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
</g>
<g id="rearhand">
<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"/>
<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"/>
</g>
<g id="fronthand">
<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"/>
<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"/>
</g>
<g id="ribbon">
<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"/>
<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"/>
<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"/>
<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"/>
<path d="M433.541 288.678L393.363 342.973L425.216 384.237L465.032 329.942L433.541 288.678Z" fill="#007100"/>
<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"/>
</g>
<text id="wmhd" x="110" y="590">World Mental Health Day</text>
<text id="date" x="270" y="650">10th October 2018</text>
</svg>
</body>
</html>在浏览器中保存和预览文件，您将看到此图像，其中所有SVG元素均可见，其中一些元素堆叠在其他元素之上：
让我们从SVG中包含的每个元素的细分开始，以便您知道我们正在使用什么。
首先，我们有从SVG左侧进入的前手：
然后，我们的后手将从右侧进入：
两只张开的手在屏幕中央越过后，我们将其换成双手：
然后，我们将看到绿色的心理健康意识色带，该色带将逐渐消失：
主要的“世界精神卫生日”文本将在此之后淡出：
和日期文本，这将是淡入淡出的最后一个元素：
2.开始添加CSS
动画所需的所有内容都已包含在SVG代码中，我们只需要通过其ID进入并定位其包含的元素即可。
我们需要做的第一件事是隐藏所有元素，以便以后可以在适当的时候显示每个元素。 在您刚刚创建HTML文件中已经存在的<style></style>标记之间添加以下代码。
#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date {
opacity: 0;
}3.使左手从左进入
我们将在序列的每个部分中使用@keyframes动画。 我们将创建的第一个动画是一个动画，它可以使元素从SVG左边缘之外的位置移动到其在中心的原始位置。
将以下代码添加到CSS。
@keyframes infromleft {
from {
transform: translate(-100%);
opacity: 1;
}
to {
transform: translate(0%);
opacity: 1;
}
}让我们逐步介绍一下如何使用此代码。
我们只需要将元素从一个位置移动到另一位置，而不是通过临时位置使之弯曲。 因此，我们可以只使用from和to而不必指定基于百分比的关键帧。
在from关键帧中，我们将使用transform属性来translate （即重新定位）元素到最左侧，该位置表示为-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;
}现在，您应该看到两只手合在一起，直到它们在中间交叉，然后再次消失。
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动画称为duration动画，并将其duration设置为1秒。
在第三行中，我们告诉动画delay 1.5秒，这与我们前两个动画的持续时间相对应。 这样，一旦他们完成，该动画就会开始。
然后在第四行中，将animation-fill-mode属性设置为forwards 。 这是告诉动画停止在最后一帧并停留在那里。 这将使元素在最终关键帧中的opacity保持为1 ，而不是像我们的前后手一样回到默认的opacity 0 。
预览动画，完成后，您应该看到以下内容：
6.使用可重复使用的关键帧淡入其余元素
对于剩下的三个元素，我们只需要再添加一个动画，一个动画就会在应用到的任何内容中消失。 我们可以在具有不同设置的每个元素上使用它来完成序列。
创建一个名为fadein的新动画，并将其设置为从不opacity 0过渡到opacity 1如下所示：
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
} 绿丝带是我们要显示的下一个元素，因此请使用以下CSS将新的fadein动画应用于它：
#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 。
序列完成后，您现在应该看到以下内容：
现在，我们也将使主体文本淡入。 我们的文档中已经有#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秒，因此我们错开了项目的外观。
现在，您的动画应在以下状态下完成：
最后，我们需要显示日期，因此将现有的#date样式更新为：
#date {
font-size: 48px;
fill: #278927;
animation-name: fadein;
animation-duration: 0.75s;
animation-delay: 2.75s;
animation-fill-mode: forwards;
} 同样，唯一的变化是推出动画的开始时间。
结语
在最后一段代码中，您的动画现在已经完成，并且在完成运行后应如下所示：
了解有关CSS动画的全部信息：
了解有关SVG动画的更多信息：
svg动画制作
扫一扫
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
