animation-direction 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

animation-direction 속성을 사용하는 방법

青灯夜游

Jan 31, 2019 am 11:42 AM

css3생기

animation-direction 속성은 애니메이션을 차례로 역방향으로 재생할지 여부를 정의하는 데 사용됩니다. 애니메이션이 두 번 이상 재생되는 경우 animation-direction 값을 교대로 설정하여 역방향 애니메이션을 구현할 수 있습니다.

animation-direction 속성을 사용하는 방법

CSS3 애니메이션 방향 속성

기능: 애니메이션을 차례로 역방향으로 재생할지 여부를 정의합니다.

구문: 

animation-direction: normal|alternate;

normal: 기본값. 애니메이션이 정상적으로 재생되어야 합니다.

대안: 애니메이션이 차례로 역방향으로 재생되어야 합니다.

참고: animation-direction 값이 "alternate"인 경우 애니메이션은 홀수(1, 3, 5 등)에서는 정상적으로 재생되고 짝수(2, 4, 6 등)에서는 뒤로 재생됩니다. ) .

참고: 애니메이션이 한 번만 재생되도록 설정된 경우 이 속성은 효과가 없습니다.

CSS3 animation-direction 속성 사용 예

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Rendering:

animation-direction 속성을 사용하는 방법

위는 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 animation-direction 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！

See all articles

핫 AI 도구

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.