मैं चाहता हूं कि div shine-box ऊपर बाईं ओर से स्वचालित रूप से छवि के पार जाए, जैसे 3 सेकंड, बाएं से दाएं, बाएं से दाएं आदि।

यह वर्तमान कोड है:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: darkblue;
}

img {
  border: 0;
}

.shine-box {
  position: absolute;
  width: 200px height: 200px;
  overflow: hidden;
  border-radius: 40%;
}

.shine-box:before {
  position: absolute;
  top: 0;
  left: -500px;
  content: "";
  width: 120px;
  height: 500px;
  background: rgba(255, 255, 255, 0.6);
  transform: skew(-50deg);
  transition: 1s;
}

.shine-box:hover:before {
  left: 655px;
}
<div class="shine-box">
  <img class="neko" src="neko-fin.png" alt="neko.png">
</div>
0
bullaa 17 मार्च 2021, 13:54
2
क्या आप कृपया अपना एचटीएमएल भी दिखा सकते हैं (अधिमानतः अपना प्रश्न संपादित करें और कोड बटन का उपयोग करके एक कार्यशील स्निपेट बनाएं)
 – 
Pete
17 मार्च 2021, 13:57
1
लेकिन अगर आप चाहते हैं कि एनिमेशन बिना किसी इंटरेक्शन के चले तो आप कीफ़्रेम एनिमेशन
 – 
Pete
17 मार्च 2021, 14:01

1 उत्तर

सबसे बढ़िया उत्तर

क्या यह ऐसा कुछ है जिसे आप ढूंढ रहे हैं। जैसा कि @Pete ने सुझाव दिया है कि आपको संक्रमण के बजाय CSS एनीमेशन का उपयोग करना होगा

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: darkblue;
}

img {
  border: 0;
  width: 100%;
}

.shine-box {
  position: absolute;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 40%;
}

.shine-box:before {
  position: absolute;
  top: 0;
  left: -500px;
  content: "";
  width: 120px;
  height: 500px;
  background: rgba(255, 255, 255, 0.6);
  transform: skew(-50deg);
  /* transition: 1s; */
  animation: shine 3s ease infinite;
}

@keyframes shine {
  from {left: -500px;}
  to {left: 655px;}
}
/* .shine-box:hover:before {
  left: 655px;
} */
<div class="shine-box">
  <img class="neko" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBUQEBIVFRAQDxUVDw8QFw8VFRUQFRUWFhcVFRUYHiggGBolGxUVITIhJikrLi4uFx8zODMtNygtLisBCgoKDQ0NDg0NDysZFRkrLTc3LSsrKy0rKysrLSsrKy03KystKzcrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOUA3AMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAgMEBQYHAQj/xABMEAABAwICBgYGBgYHBwUAAAABAAIDBBEFIQYSMUFRYQcTInGBkRQyQlKhsSMzYnKC0VNjc5LBwggVJEPS4vAWVKOys+HxFzV0k6L/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oADAMBAAIRAxEAPwDtKEIQCEIQCEIQCEIQCEIQCEkyAb14JAgWhetF0OACDxCZfOAmHYkwbQfggmoUFuLQHa8D71x8VLjka4XaQRxaQfkgWhCEAhCEAhCEAhCEAhCEAhCEAhCEAhCEAvCUh0nBNvfbMoFvmAUR0jnHlwVXjGP09OQJn9t31cEYdJK77sbbuPkoLajFan6iCOkiOyatPWSkcRTxmw/E7wRGmjYmKzG6OnznqYY/2kkbfgSsTjIw2nv/AFri0szxmYBKY29wgprEjk66zx6StH6Mn0PD9d36RsULLnm593HyQdHfp/hnsTmT9hFUS+RYwhRZdPKU7I6s8xR13+Bc3n6eXjKGhYBu15XH4NaFEPTzW/7rB5zfmiujz6b0m8Ts5yU1Y0eZYoTtLaGQ6ramLW90ua13k6xWKh6eqn26OJ33XyN+d1Oj6aKCcatZh1wfWt1Mo8ngINK6cPzBBHEEFSqBjw67SQeIJCzlDiOi1WfoZDRS7tR01LmeNj1Z8VpafBa+BokoqqGtitkyp1WPI+zURDVPi1Eaelq3tHbOt37VNiq2OyvY8CsczSVrHCKsikpJTkBOAYnH7E7bsPdcHkrN0m8eBCK0yFnYMUfH9pvA/wACriir45R2T2htYdo/MIJSEIQCEIQCEIQCEIQCELxzrC6AJsmnOukkk5nyUTEK5sQGRc92UcTfWc7lwHPciHa2sjhYZJXBrG7XH/WZVC81dbm0mlpbfWvA657eLGnKMfadnyUfHa+moGenYrIDID9BTt7Qa73Yme2/i87OS4ppn0hV+LuMUd4qW+VPGT2hxld7Xds5IroWMdIOEYRrsoI/Sas5STaxdd36yc3Lu5uXcuaY9p/i2JEtMrmRH+5p7xstzIzd4lM4RooXWMmfLctlh2jzWgWag55S6NzPzdlfxKt6bQ4e0SV0qlwUcFZQ4QOCDmcWh8fup3/ZGP3AuoNwocEv+qxwQcml0Pj93yVfU6HD2SQuzPwocFFmwgcEHDKvRuZmzNNYZi1dQP1qeWWF189QkNJ5t9V3iF2eqwUcFQYjo81wN2oHNHemnXb1GK07ZYnCzpY2t2fbiOTvC3ct3h2HQTRekYNUtdEdtI9xdF90X7ULuWzkuHYtooW3MeXLcqjC8Tq8OnEsEj4pG72nJw4OGxw5FB9CtrruMcjHRTN9aKTb3tOxzeYSXTlpu0kOBuHDIgqq0Q0/osaY2lrmthrR9W8HVa5/GJ5za77J281YYth01KdWTtMPqTAZHk4bnIjTYFpI2Vwhms2U5MfsbJy5O5b93BaJceqJLrW6H6WdY4UtS76U5QSn+8+w4+/z9rv2lbRCEIBCEIBCEIPCUwTc33bgvZnXOruG3v3BJc6wRDdRNqjIXccmtG8rLaX6T0+DQmonIkrJgRDEDm4jcPdjG8/xVppTpBBhlM+sqNoGrFH7T3n1WN7953AFfN1TUVOL1bqqpNy45Aeq1g2MYNzQik1tVWYvUGoqXlxJy2hrW+7G3cFrsD0eawABqn4HgwaAAFssPw4DcgrqDCQNyvKbDwNynwUwClxwoiJHSgJ9sCltiToiQQxCvepU4RL3qkFeYU26BWZiSHRIKiSlBUCpw8HctC+FMPhQYnEMIB3LHY5o814ILV1yemBVJiGHA7kV8+YphclO6+dgcnDcut9F3SY2YDDsUcHa3ZgqZPa4Rynjwd555qLjmChwIIXMMawp0DtnYJy5IO+aV6PPp7yR3dF8QOaxNVJcbTxBBIIIzBBGwg53Wh6HNPRVsGGVrrzNbankec5WAeoSdrwPMdyRpxo0aWbXYPoJD2fsu93u4INn0d6WGtjNPOf7XA0axNh10WwTAcb5OA2Gx2OC2K4BRPlhkZUQG08LtaO+QdudG/7Lhdp777QF3DA8VjrKeOoi9WRubTa7Hg2ex32muBB7kE9CEIBJkfYX8u9KUeofnnsaPif+3zQJuGjPx5lJYRm95s1oJz2ADeU2LvPLgufdOek5paNtFEbTVlw4ja2nHrfvGze7WRHMukDSV+NYhaMn0SAlkDdxbfOQ83W8rLQaPYQGgABUeiGEarQSO0cyumYRRWAyRUrDaEADJXkENkmnhsp8UaI8jiUlkaVHGpDWIG2xpwMTgalBqBrUXuontVGqgZ1EksUjVSS1BFcxMvjU4tTTmIK2SJQ54bq3kjUWWNBlsSoQQclhNIsHD2kELqtRDdZrF6K4OSDgU8ctJOHMcWvjcHRvGRBBuCF9KaIY3FjuGXkt1wHV1DRtbMBk9o4H1h4jcuN6X4RrNJA7TcwovRNpQcOxFmubQVBEVQDsFz2H/hcfIlFbypoDA9zJMjGbE8tx8VM6ONKo48RdQl30VWNaMe7VMGfdrsHmwb3Kb020r46ZtXCL6rgya3uuyY7zy8QuY6J6MzyvFQXFszSHwO9yRpDmO8wEH0+hV+AYmKumiqANUyM+kZ7krSWyMPNrw5vgrBB4TbM7BtVaCXZneb271Nqj2COOXnt+F01FGgXA2wuV8zaTYmcUxeWe94mP1IeHVMybbvN3fiXeeknF/QsLqZmmz+q6uM/rJOwD4a1/BcF0IoeyHEZuN0G6wCisBktrQwWCp8Gp7ALS07ERIhYpkbE3C1S42oFManWtQ0JwBAAJQC9AXtkHlkWSrIsik2XhCXZeWQNkJtzU+QkEIiM9qjSMU5wTEjUFZMxVVdBcK9maq+oYg55j9FcHJcgx+j6qY8HZhd8xqnuCuT6b0PZ1rZtN0V2jo8xJuL4M1k3ae1hp6i9iddgGq48yNR3epOB4EI+zbMG3kua/0d8YLKmejJ7M0QkYN2vGbHxLXf8A5Xe44Re/FBQ4DH6PVVFL7EmrVQ7LfSdiZoHJ7A7vmWgVFjzhHV0c4t9a+mkd+rnZcf8AFihHir1A1OL2HO/8P4pcbF6G3d3BOE2Qcg/pD11qWmpgc5qkvcOLY22+bx5LNaK0tmtHIKX09S6+JUcPuU5d+/IR/IpGjkeQQbTDI7AK7gaqygbkreAIiVC1SmBMRBSWIHGhLATXWtG1wR6Uz3vmgfCUmW1DPeCda4HYUV6heoQeIXq8QJISSEspJQNuCZeE+5NPCIhytUCdqspQoM4QUGKR5Fc30rpbtcORXUcQbksDpJFkUHPejWv9Gxelfew9IEbu6S8ef7y+r5pdVq+ONcw1QeMurna4HmHB38F9e1z7w6w36p8CEVnNMqm1K+S9uodHODnl1EjZd2fsLYXWJxkdZBKw7HwvaR3tIWpwSfrKWCS9+sp4nX46zGm/xQTQ61/9cUhr7nwKbqH28lHpJryW+yUHDumY3xyIcKOO378iudHRkFWdNcWrjNO/c+jaPFskn5hWejrsgg3NFsVpEQBc7FSNq2xsu49w3kppta6Q55Dc0bERojWj2c+ZSDK520qHAclIainWpYTYTgRC0oJASggfZUuG+/epUdYDty+Sr0ILgG69VQyQt2FSI673h4hFTkkptlSw7/PJOXQIcmnp1yaeiI8qgzqdKoFQ4DM7OaCrrtiwelEjWtc5xsAFqMbx2KMENOu7gNniVyrSevfLcvPc0bB3IrH4j2mvkA2zgDu1CV9ZzH+xtP6qL5NXyrVQf2OM+1NVv1eYa1rfmV9V17dWlDeDY2+QH5IM7Oeyfun5LQaI/wDt9J/8Gn/6TVnal1mOPBjj5ArTaNQllFTMO1lJC0nmI2hAvFnWAPMhVVBVfTs5ut5iys8eb9A4+4Q7w2H5rGtqCHtcPZcCPA3RGZ/pAUxbNQ1G68kbjzu1w+blCwWtDGBx4ZDiVsunHDuvwkzNFzTTRzC3uHsu+D7+C5RhtTrMY6+Rb8VFbmOrdI7Wce4bgOAVzRPWWoJclf0cqqNPSvUtpVTRyq0Y5A+0pYKaaUsFA6ClBNgr0FA5dF0i69ug9uvCvCV4SgCkiQjYSO5BKQSgd9LePa87Jt9c/iPIJpxUaofYIpqsxOTc63cAs3iVU93rOJ7yVYVkqoayREVGIvWLx6awK1GJzbVmqSiNZWxU4zD5AZP2be06/gLeKipUuGk1OFUNu2TG6RvOWUOd8GnyX0Vj7rRtHF/yH/dcc0OgFbpO+UZxULHWtsuxvVAfvOcfBdZ0hk7TW+6257z/AOFUZvHSfRpdXJzonNYc/XcNVvxIW/ijDGhg2NaGjuAssRLF1ktPD+kqoyfuxXnN+X0VvFbpFN1EQexzDse0tPiLLCQUjtbVIzBse8ZLfqprKZrZC4D18/Heg9loW1FG6mkzbJC6J/c4ED5/BfNeFxPhdLSyZS08rmOHNpINl9LUM1nap2O+a450yYMaPEI8QjFoquzZiNgnYMr/AHmgH8JQQsNqFoqOVZIdnVkb6kmY5O3tV3Q1F0Gto5lc00qylJOrmlqERfNKWCoUE11JDkU+ClXTIKUCiHLr26bui6Bd14Skay8LkCiUhxXhcm3vsiiR1lW1cycqahVFXUIiPWTKirZlLq51QYjUoqqxapsCrLQuIUlHVYtKMwx0dNfK+drj7z9UfhVJS0ElfUspYvbPbePYjHrOPcPiQtD0iHrpqTAaIbHMDw3YDazQ63Bt3nwUGo/o/wCDFlJNXSevWS2a47THGTc+Ly7yC1VdNryOduJy7hkFZspo6Gjjp4smxxtij7gLE9+0+KpHvDQSTYAXJO4BVEnR2HrKx0ns08GqOHWTG58Q2P8A4i1iqdF6Ux04c4WkncZXg5Ea9tVp5hgY3wVsihR62LWYbbRmFIQgzTpLZhL0kweLFaCSmfkXt7Lvcmbm13n8CUrGafq3aw9V+zkd4UTDsQ6p+fqO9blzRHE9HnuY+TDqsakkbyw32skabBw5fMFWDQ+CQxyCzmnwI3EclsOmHQ50zRilG288Lf7Qxv8Aewj2gN7m/EdyzWA1cWKQCNzg2qjb9E8+0B7Lv9c1FT6SpVvTVKyDXSQvMcoLXtOYP+swralqlRrqepVjDUrKU9UrCGqRGlZKCnA5UcVWpLKtBaayNZQRVL30pBNLkkvUF1WmJKtFT5JwFBnqVDlq1AnqkRIqalVVTUJuoqVUVlYg9rqpZnEaok6rAXPcbNa3MlxyAA4p2vrSTYXLibNaLkknYAN63uheiTKJhxHECGytYXNa8jVgZbMn7dvLYFFNYbSRYBh0lXUWNXKBccXn1IW8htJ7yvehLRySR0uM1ectQ5wp9a/qk9uQX3H1RyB4rPU8U2lGJjJzMMpTntHYv/1H28B8e0V8zII2wQgNa1ga1rcg1gFgB4KiFitV1j8vVbkP4lQ4KXr5WQ27B7c37Jp9X8TrNtw1uCRI8NBJ2AZrR4DQGKMueLSykOkHugeqzwHxLkRZoQhFCEIQM1dO2RhY7Yd/A7iFhsQjdE8sftHkRuI5Lfqsx3CRUMysJW+o7+U8vkgo9H8cDT1Mh7J9Un5Fc+6SNCJKGU4phwPUE69RDHtidtMjAPY48O7ZZ1utG4seC1zTZzTtBV1o9pYGfQ1GbDlrHPI5ZoMzg+JUuMQiOUhlU0fRyC1z+fNvkqjEaGejfqzNyJ7Eg9V3cePJXem3Rk5hOIYLYg9uSkYbDjrQ8D9ny4KJovp9DUNNLiLcx2XGQZgjK0jdoIO9QRqauVjDV81LxPQfWHW0Mgc05iJxuLfYf+fmsvUddTu1JmOY7g4EX7jsPgg1MdWpLKtZSHEOalMrgqNMKxe+mLOitHFe+m80RfOrEzJVqkdXDimJK8Iq4lq1BnrOaqJ8R5qCap8jgyNrnvOxjAXOPgEFhV16rIWzVMghp2Okkd7Ldw4uOwDmVrMC6OKqoIfVu6iL9GLGUj5M+PctbiOJYXgFPbsscRdsTLOmlI3m+Z7zkFBA0Y0Pp8MjNZWvYZmN1nSO+rhG8MvtP2tvBYjGcWq9JqsUNCCyhjcDJI4EDVB+tl/lZv8AkuCnxXSqe5vT4ax+3PUFuH6WT4Dlv6nhlFS4XCKOiaLj6x+RJfvdI7e7luVEnCMNpsKpW0tOPVGZPrPedr3nifgoMjy4knaUPeSbk3PEqVh1AZnZ3EY9Z3H7I/PciHMEoOscJXD6Nh7A96Qe13NPx7lpEljA0BoAAAsANgA3BKRQhCEAhCEAhCEFFpPo62rZdtmztHYfuI91/LnuXIsWhkgkMUrS17drT8wd45rvSqtIMAp62PUmb2h9XK2wew8jw5HJByrRrSyopHWB14ye1G7Z4Hcea0GN6PYXjzesjPo9eG/WNAD7/bbslbz281R41onPRuu4a8V+zMwG34h7J7/NQ44QO0SW6uYcCQQeII2IK2ZuNYA49Y0yUoP10d3xEcXDaw99u8rWYL0j4dWt6uqa1hO0PAfGT5XHiFWU3SmaZ/U1P08Ry1rDrAOB3O8QpFZo/gGKHWid6NUuztHaFxP7N3Zd3jzUF9LoTh9S3rKd5ZfY6B4cz903t8FT1PRvUt+qqGOG4PDmH4XCz0/R3i1G7XoapsgGYGs6J/IcD5obpdpHR5T00jwN7o+sH7zPzVE+XQnFG7Imu+5JH/MQmTonimz0Z370X+JEPTZMzKejF99i9hv43Ur/ANdI/wDcz/8AZ/kQR49CsVcbdQG83SRW+BJVhS9Gdc/6yWKPkNeQ/AAfFQ5OnYexRXO68n+VRX9K2NVGVJQgXy1mxTSfHYPFBtcO6LqRuc8kkx924jb5Nz+Ksa3GcHwdhaXwwkD6qIB0ru9rbuPeVzN+GaU4jlPM6CNxza57Yhb7sfaPcVOoOi3DqT6XE6vXN7lmsImE8Npe49xCBOL9KtdXyejYNTP1nZdaWh8luIb6rBzJPgpej3RW1rjXY9Pru9Z0JeSL/rZNrt3ZHmVp8OxJkUfVYXRtji/TSNMUfeG+vIeZt3pQo3PcJKh5mkGwuyY37kYyHftRE+TF3PYIaRnUUrRqtcGhrnNG6NnsN57UzHGGiw2JbGkmwFydgCuqDB/al8Gf4j/BBDw7DXS9p2UfHeeQ/NaOOMNAa0WA2AJQCEUIQhAIQhAIQhAIQhAIQhB45oIsRcEWIOYI5rFaXaBCpjPokggl3NcCYnHnbNveLjktshB88YZ0bVkE+vWx5h3Ze068feHD+NiumYZoxC9mpLE17fdeAR8Vu0hsbRsAHcgy3+wrGi9LVVNMb31WPEsfd1cwcAO6yh1GF4tDfVnpagbhIyaB3i5pcPgtw8m2SraqGQ7BfuIRGHmqsQH1uHxv5xTxO+EjWqG+uk34O8nkaA/zrYTwy72O8ioxhf7rvIoM5FiNQPq8L1eGvJSN/wCUlPNrcVfkIaWHgXyTSkfha1o+KvRTvOxjvJydZh8x2Md45fNBnP6urZPr654G9lKxkLT+I6z/ACIUiiwKmhOs2O8n6WUukkP43klaOPBZTt1W95v8lNhwNg9dxdyGQ/NBQtaSbAXPAKxpMHkdm/sjn63luV7DTsZkxoHdt806hEelo2RDsjPe45k+KkIQihCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIBCEIP/Z" alt="neko.png">
</div>
1
Vinu Prasad 17 मार्च 2021, 14:54