css3动画实例分段讲解

最新推荐文章于 2024-04-12 05:23:09 发布

carson

最新推荐文章于 2024-04-12 05:23:09 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/a454213722/article/details/50685148

版权

之前写过html5+css已经代替flash 的文章，但是一直都没有这方面的实例来证明，今天来讲一下css3动画

主要是自己在写一个手机端的功能，

下面我写了一段css动画下面来详细讲解

先看完整代码

下面来分段讲解
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动画demo</title>
</head>

<body>
<style>.my-story {
background-image: url(img/my_story.png);
background-repeat: no-repeat;
width: 220px;
height: 220px;
position: absolute;
left: 50%;
top:300px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
margin: -110px 0 0 -110px;

animation: my_story 1.0s ease 0.4s;
-moz-animation: my_story 1.0s ease 0.4s;
-webkit-animation: my_story 1.0s ease 0.4s;
-o-animation: my_story 1.0s ease 0.4s;
-ms-animation: my_story 1.0s ease 0.4s;

}
@keyframes my_story
{
0% {transform: scale(0.5);}
100% {transform: scale(1);}
}

@-moz-keyframes my_story /* Firefox */
{
0% {-moz-transform: scale(0.5);}
100% {-moz-transform: scale(1);}
}

@-webkit-keyframes my_story /* Safari 和 Chrome */
{
0% {-webkit-transform: scale(0.5);}
100% {-webkit-transform: scale(1);}
}

@-o-keyframes my_story /* Opera */
{
0% {-o-transform: scale(0.5);}
100% {-o-transform: scale(1);}
}
@-ms-keyframes my_story /* IE */
{
0% {-ms-transform: scale(0.5);}
100% {-ms-transform: scale(1);}
}
</style>
<div class="my-story"></div>
</body>
</html> 
css3动画实例第一段
animation: my_story 1.0s ease 0.4s forwards;
-moz-animation: my_story 1.0s ease 0.4s forwards;
-webkit-animation: my_story 1.0s ease 0.4s forwards;
-o-animation: my_story 1.0s ease 0.4s forwards;
-ms-animation: my_story 1.0s ease 0.4s forwards;
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表Opera私有属性
主要是为了兼容游览器
animation 定义一个动画
my_story 定义一个动画名称
1.0s 完成动画所花费的时间
ease 动画的速度曲线
0.4s 在动画开始之前的延迟多少时间
animation 后面还有两个参数分别是
animation-iteration-count：动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
css3动画实例第二段
@keyframes my_story
{
0% {transform: scale(0.5);}
100% {transform: scale(1);}
}
定义的动画效果 主要：my_story 要和 第一段 animation 设置的动画名称一样
0% 100% 是动画的进度，0% 是动画的开始时间，100% 动画的结束时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
transform: scale(0.5) 缩小和放到，transform用还有很多效果请查看http://www.w3school.com.cn/cssref/pr_transform.asp
自此css3动画已经将完，如果还有问题请留言给我
demo样式中的图片

QQ交流群：136351212
查看原文：http://www.phpsong.com/1430.html

carson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画实例分段讲解

之前写过html5+css已经代替flash 的文章，但是一直都没有这方面的实例来证明，今天来讲一下css3动画主要是自己在写一个手机端的功能，下面我写了一段css动画下面来详细讲解先看完整代码下面来分段讲解动画demo.my-story {background-image: url(img/my_story.png);background-rep
复制链接

扫一扫