css3 动画效果 定义和绑定执行
2015-09-14 11:56
369 查看
首先要定义一个动画效果 keyframes 关键字
这里动画效果执行完毕后 恢复本身的css样式 有的动画效果 移动到位置 要保持 就需要写好css 元素的位置
css里直接写 (这里是一般的 也就是ie10 ie11)
@keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
谷歌等webkit
@-webkit-keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
opera浏览器
@-o-keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
火狐浏览器
@-moz-keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
实例
下面是执行动画
直接在元素上绑定animation
完整实例 字体颜色变化动画效果
这里动画效果执行完毕后 恢复本身的css样式 有的动画效果 移动到位置 要保持 就需要写好css 元素的位置
css里直接写 (这里是一般的 也就是ie10 ie11)
@keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
谷歌等webkit
@-webkit-keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
opera浏览器
@-o-keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
火狐浏览器
@-moz-keyframes 动画名称{
from{ color:#000;}
to{ color:red;}
}
实例
/*定义动画*/ @keyframes piaoru{/*ie10 ie11*/ from{color: #000;} to{color: red;} } @-webkit-keyframes piaoru{/*chrome safari*/ from{color:#000;} to{color:red;} } @-o-keyframes piaoru{/*opare*/ from{color:#000000;} to{color:red;} } @-moz-keyframes piaoru{ from{color:#000;} to{color:red;} }
下面是执行动画
直接在元素上绑定animation
/*绑定动画*/ .abstract{ /*动画执行结束后 恢复现有的样式 页面只执行一次动画效果 刷新后在执行*/ animation: piaoru 15s;/*ie10 ie11*/ -webkit-animation:piaoru 15s;/*webkit*/ -moz-animation:piaoru 15s; -o-animation: piaoru 15s; }
完整实例 字体颜色变化动画效果
<style type="text/css"> /*定义动画*/ @keyframes piaoru{/*ie10 ie11*/ from{color: #000;} to{color: red;} } @-webkit-keyframes piaoru{/*chrome safari*/ from{color:#000;} to{color:red;} } @-o-keyframes piaoru{/*opare*/ from{color:#000000;} to{color:red;} } @-moz-keyframes piaoru{ from{color:#000;} to{color:red;} } /*绑定动画*/ .abstract{ /*动画执行结束后 恢复现有的样式 页面只执行一次动画效果 刷新后在执行*/ animation: piaoru 15s;/*ie10 ie11*/ -webkit-animation:piaoru 15s;/*webkit*/ -moz-animation:piaoru 15s; -o-animation: piaoru 15s; } </style> <h3 class="abstract">摘要</h3>
相关文章推荐
- js实现元素添加样式
- CSS padding margin border
- WPF 绑定集合 根据集合个数改变样式 INotifyCollectionChanged
- 十天学会DIV+CSS(DIV布局)
- css margin
- CSS实现的灰色下拉菜单效果代码
- css 图片垂直居中总结
- CSS实例:用fieldset、legend实现文字写在边线上的效果
- CSS3选择器(二)
- CSS字体中英文名称对照表:如宋体对应SimSun
- 如果删除行内样式中某一个 属性
- animate.css – 齐全的CSS3动画库
- 百度前端笔试题目--css 实现一个带尖角的正方形
- CSS学习笔记——CSS选择器样式总结
- word 文档结构图 字体样式改变,保证有用
- css3实现条纹背景
- CSS居中
- 基于CSS3实现的黑色个性导航菜单效果
- css3常用属性
- JS+CSS实现的简单折叠展开多级菜单效果