简述css3动画
来源:互联网 发布:如何做淘宝店铺 编辑:程序博客网 时间:2024/06/05 16:07
简单讲一讲css3的动画属性,transition,transform和animation
一、transition 过渡
transition 是一个简写属性,可扩展为
1.transition-property属性,设置过渡效果的属性名称
值可为:none(没有属性有效果)|| all(所有属性有效果)|| property(自定义属性名称)
2.transition-duration属性,设置效果持续时间
3.transition-timing-function属性,设置效果的速度曲线
值可为:
linear,线性效果
ease-in,先慢后快
ease-out,先快后慢
ease-in-out,先慢后快再慢
cubic-bezier(n,n,n,n),某种速度函数
4.transition-delay属性,设置延迟执行效果的时间
二、transform 变换
常见取值分为四块,
translate类(偏移)
scale类(放大缩小)
rotate类(旋转)
skew类(拉伸)
与之相关有一个属性,transform-origin,允许你改变被转换元素的属性
transition 常与 transform 组合使用,例子
.image { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; cursor:pointer;}.image_top { position: absolute; -webkit-transform: scale(0, 0); opacity: 0; filter: Alpha(opacity=0);}.box:hover .image_bottom{ -webkit-transform: scale(0, 0); -webkit-transform-origin: bottom left;}
让div拥有名为box的class属性,里面图片拥有名为image和image_bottom的class属性,则鼠标移至该div,该图片会向左下角缩小,并且透明,最后消失,鼠标移走,图片有会反向复原(向右上角放大,逐渐显现)
注意:这里ie低版本不支持opacity所以用filter兼容(ie你懂得)
三、animation 动画
animation 也是一个简述属性,可拓展为
1.animation-name需要绑定到选择器keyframe的名字
2.animation-duration,动画时间
3.animation-timing-function,动画速度曲线,所填值与transition的该属性相同
4.animation-delay,动画延迟执行
5.animation-iteration-count,动画播放次数,值可为 n(次数)|| infinite(无限次)
6.animation-direction,是否反向播放,值为 normal(默认,正常播放)|| alternate(反向播放)
与之相关的有@keyframe属性,简单例子
.animation{ animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; }@keyframes mymove{ 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;}}
- 简述css3动画
- css3动画
- css3动画
- css3动画
- css3动画
- css3动画
- CSS3动画
- css3.动画
- CSS3动画
- CSS3动画
- CSS3动画
- css3-动画
- CSS3动画
- css3动画
- css3动画
- CSS3 动画
- CSS3动画
- CSS3动画
- 支付宝(蚂蚁金服开放平台)-支付结果异步通知-验签
- Python自学笔记一、反射
- Linux centos7下mysql安装
- myeclipse打开文件乱码
- linux系统的概况和安装
- 简述css3动画
- Integer n=new Integer(1)和int n=1的区别
- Spark MLlib java TF-IDF计算 (spark 1.5.2)
- 平稳数据
- FFMPEG命令参数
- 驼峰命名法和下划线风格的互转
- PyCharm 2016.3.2 设置vim编辑环境(Win7)
- 十进制、八进制、十六进制转换公式?
- Meterpreter使用总结(1)