Question

当悬停时，我有一些代码可以为按钮设置动画，但是当我重新加载页面时，css会应用我在按钮和按钮文本上设置的1s过渡。

我将过渡设置为仅在按钮的宽度上有效，但是可以工作，但是如果我想对多件东西进行动画处理，我必须选择仅对那些对象进行动画处理，这真是令人讨厌，因为我之前从未遇到过此问题

我正在Chromebook上使用Chrome 72.0.3626.122

PREFIX xsd:  <http://www.w3.org/2001/XMLSchema#>

SELECT ?date ?dayName
WHERE {
  # Sample dates
  VALUES ?date {
    "1961-08-04"^^xsd:date
    "1986-04-03"^^xsd:date
  }
  # Compute days since a reference date
  # This works in Virtuoso, which returns the difference in days.
  # For example, Fuseki returns xsd:duration instead.
  BIND (?date - "1900-01-01"^^xsd:date AS ?days)
  # Compute modulo by 7 without a modulo operator
  BIND (floor(?days - (7 * floor(?days/7))) AS ?mod)
  VALUES (?mod ?dayName) {
         (0    "Monday") # 1900-01-01 was Monday
         (6    "Tuesday")
         (5    "Wednesday")
         (4    "Thursday")
         (3    "Friday")
         (2    "Saturday")
         (1    "Sunday")
  }
}

# Catch occurrence of any cartesian product that can trick the human eye by adding ORDER BY CLAUSE 

ORDER BY DESC

html {
	width: 100%;
	height: 100%;
}

body,
span {
	margin: 0;
	padding: 0;
}

.button {
	width: 120px;
	height: 40px;
	border: none;
	background-color: salmon;
	transition: 1s ease;
}

.button:hover {
	width: 200px;
}

.button-text {
	color: white;
	font-size: 17px;
	transition: 1s ease;
}

.button:hover .button-text {
	color: lightgray;
}

这将在页面重新加载后的1秒内应用所有css，而不是立即加载所有css并在悬停时过渡

Answer 1

这将在页面重新加载后的1秒内应用所有css，而不是立即加载所有css并在悬停时过渡

所以您希望按钮在页面加载后1秒钟自动变宽，文本变暗，对吗？

CSS动画应该可以帮助您，因为它们是自调用的，而CSS转换需要触发事件。

// Call the keyframes
.button { animation: expand 0.55s linear 2s 1 normal forwards running; }
.button-text { animation: color-shift 0.55s linear 2s 1 normal forwards running; }

// Keyframes
@keyframes expand {
    0% { width: 120px; }
    100% { width: 200px; }
}

@keyframes color-shift {
    0% { color: white; }
    100% { color: lightgray; }
}

我已使用您的HTML和CSS来显示差异as done by PNGJ，并附带一些其他详细信息。希望有帮助。

CSS所有样式都会在页面加载时过渡时应用

1 个答案: