动画

CSS过渡动画:

transition:width 3s ease,height 3s ease 1s,background-color 3s ease 2s; 宽先变,用时3s,高1s后变,颜色2s后变
圆角:
border-radius:1s ease 3s;
transition:all 3s ease;一起变
运动曲线:
div:nth-child(1) 第一个div
box-shadow:左右,垂直,阴影清楚与否,阴影大小
insert 内阴影
transition:all 1s linear:匀速
transition:all ls ease; 中间快
transition:all 1s ease-in;越来快,突然停
transition:all 1s ease-out;越来慢,慢慢停
transition:all 1s ease-in-out;同ease
贝塞尔曲线:回弹
display:none;默认隐藏
display:block;出现
变形:
transform:translate(30px,20px); 水平,垂直位移 不影响别的
旋转:
transform:rotate(30deg) 转30度
transform:scale(0.5,3) 缩放
transform:skew(30deg,0) 水平斜切45度,垂直不变
transform-style:preserve-3d;
默认Z轴旋转
transform:perspective(800px) rotateX(45deg) X轴旋转

变形中心点:

transition-origin:left center; 沿着左边中心点转
transition-origin:left top; 左上角
transition-origin:50px 50px;
transition:all 1s ease;
transform:rotate(90deg);
背面可见:(默认)
transition:all 1s ease;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0deg);
transform-visibility:hidden; 背面不可见
transition:rotateY(180deg); 翻转
position:relative; 相对定位 父类定义,相对body
position:absolute; 绝对定位 相对父类
text-align:center; 文字居中

animation动画:

animation:moving 1s ease 1s 5(infinite) alternate forwards; 一次1s,5次(不限次),原路返回 ,停后不跳回
animation-play-state:paused; 鼠标移入暂停
running; 移入开动
@keyframes moving{
from{
width:100px;
}
to{
width:50px;
}
}
border-radius:50px; 圆

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • css3有哪些新增的特性?1,css权重 2,新增选择器 3,css3圆角,阴影,rgba(颜色表示法) ...
    爽爽ing阅读 1,462评论 0 0
  • 过渡效果的设置transition: ease开始和结束慢速运动曲线linear 匀速ease 开始和结束慢设置圆...
    crx彭彭阅读 1,254评论 0 0
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 5,846评论 0 4
  • CSS过渡动画: transition:width 3s ease,height 3s ease 1s,backg...
    小胡123阅读 2,828评论 0 0
  • 关键词:围观 最后一面 再会 劳拉和佩斯是一对恋人。 劳拉有一个嗜赌如命的父亲,为了还债,她铤而走险贩毒,但第一...
    甜甜妈正面管教之路阅读 1,306评论 0 0