写个简单css动画,transition 和animate

简介: 写个简单css动画,transition 和animate

写个简单css动画,transition 和animate


先写个普通的不动的球

.ball{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
}

然后加上一个神奇的属性transform,可以让小球偏移原来的位置(transform有很多玩法,这里展示移动)

.ball{
  /* ...  */
  transform: translate(200px,0);
}

transition:动作触发,一次性动画

让其动起来

.ball{
  /* ...  */
  transform: translate(200px,0);
  transition: 1s linear;
}
.ball:hover{
  /* ...  */
  transform: translate(0,0);
}

transition的毛病就是,必须某种动作触发(hover active巴拉巴拉),然后一次性动画。

需要复杂些的动画就需要animation

animation:随时触发,可控性很强

上面的换成animation:

.ball {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: #f69;
    animation: move 2s linear;
  }
  @keyframes move {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(200px, 0);
    }
  }

网络异常,图片无法展示
|

球一开始就运动,但是运动完之后,秒回动画前的位置,也就是很突然的感觉,想改变的话,两种方式:

  • 第一种常想到的方式:设置动画的100%处就是动画前的状态,这样结束时就和动画前的状态一致了。
@keyframes move {
    0%,100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(200px, 0);
    }
  }
  • 第二种:设置动画填充模式forwards,动画结束之后,就让小球在100%的状态
/* backwards是有延迟时让小球在动画开始前,在0%的状态。both是动画开始前和结束后一个0%,一个100%的状态 */
.box{animation: move 2s linear forwards;}

大牛老姚的animation的8个属性的介绍,非常棒

无限播放:基本结合alternative

实现一直在动的话

网络异常,图片无法展示
|

.ball {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
  /* alternate很关键,正向和反向交替进行,先从0%->100%,然后100%->0%,这样才有一直动的效果 */
  animation: move 2s linear alternate infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(200px, 0);
  }
}


目录
相关文章
|
5天前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
110 73
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
2月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
64 6
|
3月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
91 7
|
3月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
70 31
|
3月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
36 2
|
3月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
43 6
|
3月前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总,一共包含126种加载动画效果,不同样式不同图案,简单实用,一览包含所有,会让你在等待的过程中,体验视觉盛宴,给用户不一般的加载体验,欢迎下载试试!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
67 2
|
3月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
131 1

热门文章

最新文章