首页 > 其他分享 >css动画

css动画

时间:2022-09-30 15:22:07浏览次数:64  
标签:动画 0.8 top width rem 播放 css

一、CSS3 过渡动画:

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

<div></div>

二、动画

animation:upDown 4s infinite;
@keyframes upDown{
    0%   {top:-0.8rem;}            
    50%  {top:-1.1rem;}            
    100% {top:-0.8rem;}
}
@-webkit-keyframes upDown /* Safari 和 Chrome */
{
    0%   {top:-0.8rem;}            
    50%  {top:-1.1rem;}
    100% {top:-0.8rem;}
}
animation-iteration-count:1;  /* 执行一次 */

animation-direction: normal|alternate;//是否应该轮流反向播放动画
    normal 默认值。动画应该正常播放。
    alternate 动画应该轮流反向播放。动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。注释:如果把动画设置为只播放一次,则该属性没有效果。

 

标签:动画,0.8,top,width,rem,播放,css
From: https://www.cnblogs.com/redFeather/p/16745012.html

相关文章

  • CSS:鼠标移动到图片上的动画
    CSS:鼠标移动到图片上的动画.picimg{ width:100%; left:0; top:0; right:0; bottom:0; margin:auto; transition:all.5s;}.pic:hoveri......
  • 带有旋转效果的提交按钮 - 仅限 CSS - 一步一步
    带有旋转效果的提交按钮-仅限CSS-一步一步HTML对于HTML,我们需要一个带有文本和“检查”svg元素的按钮。我们将显示文本并隐藏svg。在按钮焦点上,我们将显示sv......
  • 延迟滚动动画
    延迟滚动动画延迟滚动动画免费下载在HTML、CSS和JavaScript中HTML:<divclass="boxbox_1"><ul><li></li><li></li><li></li><li></li><......
  • element.css
    #dividerTitle{color:dimgrey;font-weight:bold;font-family:"Arial";}.alignRight{margin-left:40%;}.el-header,.el-footer{background-col......
  • CSS空心箭头
    使用before和after伪类实现空心箭头//主要利用before和after的边框实心箭头,通过绝对定位覆盖完成看上去像空心箭头的设计.dom{display:inline-block;position:......
  • CSS 设置动态高度, 等比例缩放宽度 (超实用)
    如何通过CSS实现高度height随着宽度width变化而变化,保持长宽比例不变,且宽度是根据父元素宽度变化的使用:before伪元素,能获取到实际高度(推荐)html:<div......
  • css 左侧固定右侧自适应(7种)
    ​​演示demo​​​其中有老生常谈的​​float​​方法,BFC方法,也有CSS3的​​flex​​布局与​​grid​​布局。常用的宽度自适应的方法通常是利用了​​block​​水平的......
  • 使用animate.css增加动效
    给网页增加一些动效会使得网页更加地生动。animate.css封装了一个动画库,可直接使用封装好的动画效果。其链接为:​​https://daneden.github.io/animate.css/​​ 我们可以......
  • css中的px、em、rem的区别----整理
    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web......
  • CSS中Cellpadding和 Cellspacing用法和定义
    https://www.cnblogs.com/LiuSiLence/p/9023293.htmlCellspacing,属性表示两个单元格之间的距离cellpadding,是补白,是指单元格内文字与边框的距离。 ......