<font color="red">在前端中，随着语言的发展，css 变得越来越强大，可以实现许多动态动画效果！</font>下面是动画效果的基本格式
<style> @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(1000px, 0); } } div{ animation-name: move; animation-duration: 2s; }</style>
复制代码
或者
<style> @keyframes move { from { transform: translate(0, 0); } to { transform: translate(1000px, 0); } } div{ animation-name: move; animation-duration: 2s; }</style>
复制代码
<body> <div> </div></body>
复制代码
本人比较推荐的是用百分比来表示，好处大大的，我们往后看就能知道。
<style> @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(500px, 0); } 50% { transform: translate(500px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0, 0); } } div{ animation-name: move; animation-duration: 2s; }</style>
复制代码
这是一种正方形动画，如果是 from,to 则不可以。
<font color="blue">动画属性非常多，是好事，说明它的功能很大，对于我们写网站方便实现更多的效果。</font>
我们现在将这些属性用在程序中来看一串代码，读者们可以将这些程序复制，进行实验，本人使用软件为 vscode.
<style> @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(500px, 0); } 50% { transform: translate(500px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0, 0); } } div { width: 100px; height: 100px; background-color: pink; animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0; animation-timing-function: linear; animation-direction: alternate; animation-fill-mode: forwards; } div:hover { animation-play-state: paused; } </style>
复制代码
第一种是分开写
<style> @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(500px, 0); } 50% { transform: translate(500px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0, 0); } } div { width: 100px; height: 100px; background-color: pink; /* animation: name duration timing-function delay iteration-count direction fill-mode; */ animation: move 2s ease infinite alternate forwards; </style>
复制代码
第二种是连写，熟练了会比较方便
<body> <div> </div></body>
复制代码
程序多谢了就会熟悉，vscode 有代码提示，大家不必死记硬背，希望和大家共同进步。
评论