css动画 animation

今天用css做了一个简单的三角上下移动的一个小动画，说白了就是在改变该物体的height值。除了这个方法，还可以用js。

一、在用css写动画时，一定要记住兼容性问题。如何解决该兼容性？在前面加内核前缀。

　　opera的内核是-o-;

　　-moz代表firefox浏览器私有属性

　　-ms代表IE浏览器私有属性
　　-webkit代表chrome、safari私有属性

二、动画的属性：

　　animation-name:调用动画的名称

　　animation-duration:动画执行的时长

　　animation-timing-function:时间速度曲线函数

　　　　　取值：匀速linear--常用 ease慢速 ease-in迈速开始，加速效果 ease-out快速开始，慢速结束 ease-in-out:慢开始和结束，先加速后减速

animation-iteration-count:播放次数

　　　　　取值：(具体数值/循环播放infinite)

　　animation-direction:动画的播放方向

　　　　　取值：normal默认正向 reverse:逆向 alternate:轮流基数为正，偶数为倒

　　谷歌不支持以上属性，所以记得加前缀-wekit

三、声明动画

　　1、通过@keyframes声明动画的关键帧

　　2、为元素调用动画

<style>.boult{position:fixed;width:100%;height:20px;bottom:0;z-index:12;text-align:center;margin-bottom:20px;}.boult{animation-name:changeBgColor;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;-webkit-animation-name:changeBgColor;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;}@keyframes changeBgColor{0%{height:40px;            }100%{height:60px;}}@-webkit-keyframes changeBgColor{0%{height:40px;}        100%{height:60px;}}@-ms-keyframes changeBgColor{0%{height:40px;        }        100%{height:60px;            }}@-o-keyframes changeBgColor{0%{height:40px;        }100%{height:60px;            }}@-moz-keyframes changeBgColor{0%{height:40px;        }        100%{height:60px;            }}
</style>
<div class="boult" ><img src="data:images/boult.png"    />
</div>

转载于:https://www.cnblogs.com/1rui/p/5521113.html

css动画 animation相关推荐

css动画animation详细解读
以一个小球为例向右匀速运动200px 然后再移动回来,然后再移动到200px处停在那里效果如下 div{width:40px;height:40px;border-radius:50%; ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
HTML5 CSS动画 animation使用
首先看一下页面的布局 <body><div class="box1"><div class="box2"></div& ...
css动画 animation
1. 线性渐变线性渐变指的是颜色沿一条直线进行渐变(例如右上到下,从左到右等),要创建线性渐变,您至少需要定义两个色标(色标指的是想要平滑过渡的颜色),若要创建更加复杂的渐变效果,则需要定义更多的色 ...
css动画-animation各个属性详解(通俗易懂)
https://blog.csdn.net/chritina/article/details/99623017
CSS动画实现心跳效果
CSS动画实现心跳效果简介实现步骤代码效果简介使用CSS动画animation 和tranform(缩放.旋转). 实现步骤添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者. css动画有两种,animation,transition,所以分开来讲. 1.animation: css定义 #left1{} html定义: 安 ...
css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

css动画 animation

css动画 animation相关推荐

最新文章

热门文章