最新消息:欢迎加入小松的QQ群一起讨论一起学习,本站启用小松自己写的redis缓存,文章发布修改自动删除缓存,现在速度杠杠的

css3动画实例分段讲解

前端技术 514浏览 0评论

之前写过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样式中的图片

my_story

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» css3动画实例分段讲解
本文链接地址:https://www.phpsong.com/1430.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (1)

加载中,请稍候...
  1. 讲的非常详细
    夏洛特烦恼1年前 (2015-10-20)回复