css动画animation:@keyframes关键帧，infinite循环
程序员文章站
2024-03-25 12:38:16
...
css动画的实验
oeasy007，制作简单的css动画
在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@keyframes myfirst {
from {opacity: 0.5}
to {opacity: 1}
}
img{
animation: myfirst 5s infinite;
}
</style>
</head>
<body>
<img src ="imgs/redstars.jpg" width="400px" height="300px"/>
<h1>七里香</h1>
<p>窗外的麻雀，在电线杆上多嘴</p>
<p>你说这一句，很有夏天的感觉</p>
<p>手中的铅笔，在纸上来来回回</p >
<p > </p >
</body >
</html>
效果是渐显动画。
查看网址：https://liujiajiahahaha.github.io/mynewshare/001basic/index.html
myfirst是自己定义的动画关键帧名字，
img{
animation: myfirst 5s infinite;
}
在此处的myfirst表示使用这个动画，5s是过渡时间，infinite循环
推荐阅读
-
css动画animation:@keyframes关键帧，infinite循环
-
惊讶！！！CSS3 关键帧动画——animation与@keyframes竟然是这样使用
-
css3关键帧动画animation
-
css3 animation关键帧和transform转换实现旋转动画
-
CSS 使用动画—— @keyframes 规则和 animation 规则
-
CSS3中的关键帧@keyframes 和 动画animation
-
CSS3中的@keyframes关键帧动画的选择器绑定
-
CSS3中的@keyframes关键帧动画的选择器绑定
-
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
-
CSS 动画 @keyframes 规则 animation属性 CSS中可以进行动画的属性