css3动画animation，transition

animation demo1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>animation动画</title><style>#div1 {width: 100px;height: 100px;background-color: pink;position: absolute;top: 10%;left: 25%;}/* 延迟1秒 动画过程3秒 infinite死循环播放 linear线性平滑播放 */.myDiv1 {animation: div1Change 3s 1s both infinite linear;}/* 动画规则 */@keyframes div1Change{0% { background-color: palegreen;width: 120px;height: 120px;}50% { background-color: darkkhaki;width: 160px;height: 160px;}100% { background-color: lightcyan;width: 220px;height: 220px;}}</style></head><body><div id="div1" οnclick="this.className='myDiv1'"></div></body>
</html>

transition demo1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>transition demo</title><style>#div1 {background-color:honeydew;width: 200px;height: 200px;left: 30%;position: relative;/* 触发动画效果 悬浮在div上后 div变大颜色变化 然后变回来 */transition: background-color 5s 1s,width 1s 1s,height 1s 1s;}#div1:hover {background-color:coral;width: 500px;height: 500px;}</style></head><body><div id="div1"></div></body>
</html>

css3动画animation，transition相关推荐

CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
幻灯片（基于CSS3动画animation）
效果预览: 实现思路: 类似于:h5+css3+js之移动端轮播图将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation定义每一帧的动画,在每一帧 ...
Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题.CSS3 的出现,让动画变得更加容易,性能也更加好. ...
css3动画 --- Animation
Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置. 动画包括两个部分:描述动画的样式规则:用于指定动画开始.结束以及中间点样式的关键帧. 相较 ...
CSS3动画效果-transition
前面的话通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果.过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方.本文将介绍和梳 ...
CSS3动画animation
一.语法 animation: animation-name(创建的动画名) animation-duration(动画时间) animation-timing-function(动画方式) anim ...

css3动画animation，transition

animation demo1

transition demo1

css3动画animation，transition相关推荐

最新文章

热门文章